JavaScript Haikus: Mis Aventuras en la Programación Mínima

Rate this content
Bookmark

Descubre el arte de crear programas JavaScript extremadamente pequeños. En esta charla aprenderás los principios y técnicas detrás de la creación de scripts compactos pero poderosos que son más cortos que esta descripción. Sumérgete en el cautivador mundo de la programación minimalista, donde utilizamos estos scripts para crear arte, juegos, herramientas y una multitud de experimentos intrigantes.

27 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla trata sobre la escritura de programas JavaScript super pequeños, conocidos como código mínimo. Explora el concepto de code golf y el uso de un editor en vivo para obtener retroalimentación instantánea. La charla analiza diversas formas de compartir código mínimo, incluyendo Twitter.net. También cubre la creación de gráficos, juegos y sonido en un espacio reducido. El orador destaca tweets inspiradores y muestra ejemplos de código mínimo, incluyendo escritura asemática. El futuro del código mínimo incluye nuevas técnicas, mejor soporte del navegador y programación asistida por inteligencia artificial.

Available in English

1. Introducción a Tiny Code

Short description:

Bienvenidos a JavaScript HiCues. Una charla sobre mis aventuras en la escritura de programas JavaScript super pequeños. Hoy nos vamos a centrar en estos programas del tamaño de un tweet. Hablemos sobre el código diminuto. Shakespeare dijo, La brevedad es el alma del ingenio. Y eso es más o menos lo que es el código diminuto. Pero en lugar del lenguaje, hay muchas formas diferentes de describir el código diminuto. El code golf es el corazón de la programación diminuta y se trata de utilizar trucos de programación para ahorrar espacio. JavaScript es genial para este tipo de cosas porque puedes usar un editor en vivo. Es una herramienta basada en web donde puedes escribir código y verlo suceder y ejecutarse al instante en tiempo real. Tiene una retroalimentación instantánea y es una forma muy visual de programar.

Hola a todos. Bienvenidos a JavaScript HiCues. Una charla sobre mis aventuras en la escritura de programas JavaScript super pequeños.

Primero, un poco sobre mí. Mi nombre es Frank Forrest. Tengo una licenciatura en ciencias de la computación y tengo más de 20 años trabajando en la industria de los videojuegos en todo Estados Unidos, algunos juegos que tal vez hayas jugado. Actualmente, me estoy enfocando en el desarrollo de juegos independientes y en la creación de arte generativo. Aquí hay algunos de los juegos que hice, todos con JavaScript. También hago arte generativo, que, nuevamente, está hecho con JavaScript.

Pero hoy nos vamos a centrar en estos programas del tamaño de un tweet. He hecho más de mil de ellos y quiero compartir mis secretos contigo hoy. Hablemos sobre el código diminuto. Entonces, ¿qué es el código diminuto? Shakespeare dijo, La brevedad es el alma del ingenio. Y eso es más o menos lo que es el código diminuto. Pero en lugar del lenguaje, hay muchas formas diferentes de describir el código diminuto. Puedes llamarlo size coding, code golf o simplemente minificar. Pero en última instancia, el objetivo es crear arte genial, música u otros tipos de efectos y crearlo con la menor cantidad de código posible mientras te diviertes.

Todo esto comenzó con la demo scene a principios de los años 80. Tal vez hayas oído hablar de ella. Es una subcultura de arte informático donde las personas crean demos que están compuestos por gráficos y música. A menudo se ejecutan en computadoras más antiguas. Pueden tener desde 64 kilobytes hasta incluso menos de 256 bytes. Pero esos utilizan bytecode, por lo que poco a poco están adoptando lenguajes como JavaScript. El code golf es el corazón de la programación diminuta y se trata de utilizar trucos de programación para ahorrar espacio. Por ejemplo, comprimirás tu código eliminando los espacios en blanco, utilizando variables de una sola letra, no utilizando ifs y simplemente no utilizando funciones y luchando por cada byte posible para comprimirlo todo. JavaScript es genial para este tipo de cosas porque puedes usar un editor en vivo. Es una herramienta basada en web donde puedes escribir código y verlo suceder y ejecutarse al instante en tiempo real. Tiene una retroalimentación instantánea y es una forma muy visual de programar.

2. Compartiendo Tiny Code en Twitter

Short description:

Usar un editor en vivo es genial para capturar gifs e imágenes, depurar y iterar el código. Hay varias formas de compartir código diminuto, como enviarlo a una demo party o usar sitios web como Shader Toy o Twitter.net. Twitter.net es una plataforma de código abierto para compartir demos de JavaScript de 140 caracteres. Proporciona una plantilla de código predeterminada y configuración automática para la animación. Minificar el código y hacer optimizaciones puede reducir significativamente su tamaño. Twitter también se puede ejecutar de forma independiente con un código mínimo. Permite remixes creativos y el uso de caracteres Unicode astrales para almacenar más bytes en un solo tweet.

Me encanta usar un editor en vivo para este tipo de cosas. Incluso puedes capturar gifs e imágenes con él y tiene algunas herramientas para ayudar a depurar y guardar y cargar tu código para facilitar la iteración. Hay varias formas diferentes de compartir código diminuto.

Puedes enviarlo a una demo party. También hay sitios web donde puedes compartir tu código, como Shader Toy o Twitter.net, del cual hablaremos hoy. ¿Qué es Twitter? Twitter.net es un lugar donde puedes compartir demos de JavaScript de 140 caracteres. Fue creado en 2016 y actualmente tiene más de 20,000 tweets. El sitio web en sí es de código abierto. Y estamos trabajando en una nueva versión beta que tiene algunas características avanzadas que también mostraré hoy.

Lo básico de Twitter es que cuando comienzas un nuevo tweet, se te presentará este código predeterminado que dibuja nueve líneas en la pantalla y las hace moverse de un lado a otro. Aquí está el código para eso. También configurará automáticamente un lienzo y un bucle para que la animación sea realmente fácil de hacer funcionar. Hay algunas funciones que se configuran automáticamente para seno, coseno, tangente y para obtener un color RGBA. Por ejemplo, si quieres minificar el programa predeterminado de Twitter, comienzas con el de la izquierda y luego haces optimizaciones y minificaciones eliminando los comentarios y reduciéndolo. Luego puedes hacerlo aún más pequeño haciendo algunas concesiones, que cambian un poco la salida, pero de una manera apenas perceptible. Por ejemplo, cambiar el espacio entre esos rectángulos de 100 a 99. Eso ahorra un byte completo de espacio, y ahorrar esos bytes realmente suma.

Twitter también se puede ejecutar de forma independiente. Entonces, si quisieras hacer, digamos, un archivo HTML que pueda ejecutar un tweet, se vería algo así. El código del tweet es solo esa pequeña parte en el centro. Todo lo demás es configurar la interfaz de Twitter en un lienzo. Solo se necesita una cantidad mínima de código para ejecutar uno de estos. Es prácticamente JavaScript básico. Hemos hecho todo tipo de remixes divertidos del tweet predeterminado. Aquí están algunos de mis remixes favoritos de la comunidad. También he hecho algunos yo mismo, todos utilizando el mismo concepto y explorando lo que podemos hacer con solo esas nueve líneas verticales.

Algo que debes tener en cuenta al usar Twitter es que Twitter utiliza 140 caracteres, y cada uno de esos caracteres puede contener varios bytes. Encontramos una forma de almacenar dos bytes en cada uno de estos caracteres Unicode, y con el decodificador también incluido, podemos ajustar hasta 194 bytes en un solo tweet. Puedes imaginar cómo funciona esto, tienes estos caracteres Unicode astrales que contienen cuatro bytes, pero dos de los bytes pueden ser lo que quieras. Entonces, la forma en que funciona la descompresión es que llama a escape en el carácter Unicode, elimina lo innecesario, luego lo desescapa y evalúa lo que queda. Realmente nos ha permitido empujar los límites de lo que es posible en un tweet.

3. Creando Gráficos, Juegos y Sonido en Miniatura

Short description:

Puedes usar una técnica similar para comprimir datos de imágenes. La mayor parte de lo que haremos es utilizar la API de lienzo 2D para dibujar formas geométricas, texto y emojis. Los números aleatorios son realmente clave para este tipo de creación artística. Incluso puedes hacer juegos diminutos que quepan en este espacio. Si quisieras hacer Flappy Bird, que quepa en 244 bytes de HTML puro, se vería algo así. También puedes hacer sonidos en ese espacio reducido. En Twitter, existe BiteBeat Music como opción. Incluso puedes usar la síntesis de voz para crear voces con la capacidad de ajustar el tono y el volumen también.

Puedes usar una técnica similar para comprimir datos de imágenes. He experimentado un poco con eso para crear la Mona Duitza, una Mona Lisa que cabe en un tweet, e incluso un autorretrato y todo tipo de gráficos antiguos, arte de mapas de bits. Es bastante divertido experimentar con gráficos diminutos.

La mayor parte de lo que haremos es utilizar la API de lienzo 2D para dibujar formas geométricas, texto y emojis. Podemos establecer el color en alfa y utilizar características como sombra y desenfoque de sombra para crear efectos especiales. Incluso es posible dibujar un píxel a la vez para crear gráficos de rasterización de alta definición. Por ejemplo, las funciones que utilizaremos son fillRect, arc, establecer el estilo de relleno, dibujar líneas, ese tipo de cosas, y casi todo se hace utilizando este pequeño conjunto de funciones.

También hay otras opciones que puedes utilizar para gráficos, como HTML, CSS tiene algunas cosas interesantes que puedes hacer, e incluso hacer SVG, y logré trazar uno de mis tweets que utiliza un SVG. Fue una especie de experimento divertido. Los números aleatorios son realmente clave para este tipo de creación artística, y existe un Math.random, por supuesto, que puedes usar para obtener números aleatorios entre cero y uno. Pero a veces necesitas algo como un número aleatorio fijo, y puedes lograrlo haciendo el seno de un valor al cuadrado, es una forma sencilla de obtener un tipo de resultado aleatorio. Y hay todo tipo de cosas que puedes hacer para obtener números aleatorios, como usar el operador módulo, e incluso crear un tipo de ruido fractal, un efecto de ruido Perlin con esto también. Hay tantos tipos diferentes de algoritmos que son posibles en este espacio. Es algo increíble. Realmente todo es posible. Y eso es lo que te voy a mostrar hoy.

Incluso puedes hacer juegos diminutos que quepan en este espacio. He experimentado un poco con eso y he creado una gran variedad de juegos, aunque obtener entrada requiere un poco de espacio. Puedes usar un evento onclick. Es la opción más pequeña para obtener entrada del mouse. Tal vez algo como onkeydown para obtener entrada del teclado. O incluso es posible obtener entrada de un gamepad en un espacio bastante reducido para crear estos juegos diminutos y experiencias interactivas. Por ejemplo, si quisieras hacer Flappy Bird, que quepa en 244 bytes de HTML puro, se vería algo así. Básicamente, crearás un lienzo y el resto es todo JavaScript, obtener el contexto del lienzo, configurar un intervalo y un poco de lógica para la parte de la física, y la única entrada se realiza mediante un evento onclick. Luego, para dibujar cosas, hay una parte de FillRect y FillText, y el resto es solo un poco de lógica necesaria para ejecutar el juego. También puedes hacer sonidos en ese espacio reducido, aunque es muy difícil de ajustar porque el código para reproducir el sonido ocupa tanto espacio que no queda mucho para determinar qué se debe reproducir realmente. Aun así, hemos hecho mucho de eso. En Twitter, existe BiteBeat Music como opción. He lanzado un álbum completo de BiteBeat Music en Twitter, e incluso puedes usar la síntesis de voz para crear voces con la capacidad de ajustar el tono y el volumen también. Así que hay oportunidades allí.

4. Tweets Inspiradores

Short description:

Hablemos de algunos de los Tweets que me inspiraron. Echa un vistazo a este increíble Tweet submarino de Pavel. Me encanta este. Es tan simple y muestra el poder de Twitter. Aquí tienes una demostración de raycasting. Es realmente increíble. Me encanta este Tweet de la puerta de cuarentena de Yanni. Este de un avión de papel volador es genial. Me encanta este simulador de tráfico de la ciudad de Tom Exor. El mar y lo que más me gusta son los pequeños coches que conducen por la ciudad y parecen interactuar entre sí. Yantan hizo esta estructura 3D con efectos de sombra para crear un desenfoque nublado y ahumado.

Hablemos de algunos de los Tweets que me inspiraron. Echa un vistazo a este increíble Tweet submarino de Pavel. Me encanta este. Es tan simple y muestra el poder de Twitter. Casi todo lo que ves aquí será un bucle for y luego un estilo de relleno y un relleno de rectángulo es como funcionan muchos de estos Tweets. Aquí tienes una demostración de raycasting. Es realmente increíble. Me sorprendió mucho cuando lo vi por primera vez. Me encanta este Tweet de la puerta de cuarentena de Yanni. Tiene una pequeña optimización aquí para almacenar el relleno del rectángulo en F y luego usarlo para llamar al relleno del rectángulo múltiples veces, una técnica común que se ve en Twitter. Este de un avión de papel volador es realmente genial. Se hace de una manera un poco diferente, donde tienes una función que se alinea con. Me encanta este simulador de tráfico de la ciudad de Tom Exor. Es alucinante cómo logró crear esto. El mar y lo que más me gusta son los pequeños coches que conducen por la ciudad y parecen interactuar entre sí. Yantan hizo esta estructura 3D ahumada. En este caso, se utilizan efectos de sombra para crear una especie de desenfoque nublado y ahumado en 3D.

5. Explorando Ejemplos de Código Pequeño

Short description:

Echemos un vistazo a algunos de mis ejemplos de código pequeño y cómo funcionan. He creado más de mil tweets de código pequeño en los últimos cuatro años, abarcando una amplia gama de temas. El espacio es uno de mis favoritos, y he creado efectos como un agujero negro y renderizado fractal. Los autómatas celulares son poderosos, con efectos como agua y fuego. También he experimentado con pequeñas ciudades y edificios, incluyendo una puesta de sol en la ciudad y un sistema de raycasting. Los paisajes de árboles, como la escena del lago de árboles, han sido optimizados a solo 119 bytes.

Entonces echemos un vistazo a algunos de mis ejemplos de código pequeño y puedo explicarte cómo funcionan realmente. Aquí está el primer tweet que hice allá por 2019. No es mi mejor trabajo, pero en ese momento lo era y he recorrido un largo camino desde entonces. De hecho, he hecho más de mil en los últimos cuatro años. Aquí tienes algunos de los mejores.

He cubierto una amplia gama de temas. El espacio es uno de mis favoritos. Por ejemplo, para crear un efecto de agujero negro, puedes hacerlo iterando y estableciendo un color y dibujando estos rectángulos rellenos. En este caso, comienza desde abajo, itera hacia arriba y se expande en espiral, y ese color comienza en rojo y se va hacia el blanco, y hay una prueba especial para el primer rectángulo que se dibuja para dibujar ese negro en el fondo. Puedes hacer renderizado fractal en este espacio muy bien. Se presta muy bien al código pequeño. Por ejemplo, un renderizado de Mandelbrot pequeño se vería algo así. Utiliza la técnica de renderizar un píxel a la vez para obtener un renderizado de alta definición.

Los autómatas celulares son un efecto muy poderoso. Aquí tienes algunos de los que he hecho. Puedes obtener muchos resultados diferentes, como efectos de agua o fuego, que son más de tipo matemático. Aquí tienes un triángulo de Sierpinski que se dibuja utilizando un efecto de autómata celular 1D. Almacena las celdas en un array y las actualiza todas basándose en la regla, que en este caso es la regla 90, pero lo que realmente importa son los bits de esa regla que se utilizan para determinar el siguiente estado de cada celda. He hecho tantos experimentos diferentes con pequeñas ciudades y edificios. Me encanta ese tipo de cosas. Por ejemplo, esta puesta de sol en la ciudad se puede hacer nuevamente, haciendo un bucle y estableciendo el color, dibujando rectángulos rellenos. En este caso, dibuja el fondo durante el primer fotograma de una manera un poco diferente que los edificios, y cada edificio se dibuja mediante una cuadrícula de cuadrados que alternan entre negro y coloreado para las ventanas, y se mezclan y se dibujan de arriba a abajo para crear un efecto de paisaje urbano. Realmente me encanta cómo resultó este. Una de las cosas más recientes que hemos podido hacer en Twitter es el raycasting para empujar realmente los límites de lo que es posible. Incluso he hecho un sistema de raycasting de alta definición en Twitter, como este tweet aquí que dibuja una ciudad y tiene sombras y texturas también, utilizando ese código a la derecha. He hecho todo tipo de paisajes de árboles diferentes, como esta escena del lago de árboles. Y con ayuda de la comunidad, logramos reducirlo de 194 caracteres a solo 119 bytes. Es bastante interesante cómo funciona este y cómo genera un número aleatorio, por ejemplo. Definitivamente vale la pena investigarlo. Se dibuja de izquierda a derecha para los árboles, el primer fotograma es donde dibuja las estrellas o el tipo de reflejo y las líneas verticales u horizontales.

6. Asemic Writing and the Future of TinyCode

Short description:

La escritura asemica es un tema divertido para explorar en Twitter. Crear un sistema de escritura super pequeño implica dibujar una línea garabateada con interrupciones y diferentes coeficientes. Incluso he logrado representar personas diminutas dibujando cuatro líneas para sus extremidades. He creado ilusiones ópticas, paisajes, sistemas caóticos, simulaciones de física, árboles, túneles, efectos 3D, palabras animadas y más. Es divertido escribir TinyCode, relajante y mejora las habilidades de programación. Únete al movimiento TinyCode creando tu propio arte en 140 caracteres y compártelo en las redes sociales. El futuro de TinyCode incluye nuevas técnicas, mejor soporte del navegador, evolución del lenguaje JavaScript, computadoras más rápidas y programación asistida por IA.

La escritura asemica es cuando tienes una escritura que parece realista y significa algo, pero en realidad es falsa. Juego mucho con eso en Twitter. Creo que es un tema divertido.

Por ejemplo, si quieres crear un sistema de escritura super pequeño, logré reducirlo a lo esencial aquí. Decidir dónde habrá interrupciones en la escritura es la primera línea, y luego comenzar y detener esa línea usando un fill begin path. El resto consiste en dibujar esta línea garabateada, que se mueve de izquierda a derecha y de arriba a abajo, y circula con diferentes coeficientes.

Incluso he logrado representar personas diminutas corriendo, saltando y peleando. Puedes representar una persona diminuta pensando en ellas como dibujar cuatro líneas. Para las cuatro extremidades, comienzas en la parte superior de la cabeza, dibujas hacia abajo y cada una de esas líneas es una serie de puntos. Tienes una cabeza, hombro, codo, mano, y lo mismo para el otro brazo, solo que un poco desplazado, y las piernas son un poco más largas, pero en última instancia se utiliza el mismo código.

He creado muchas ilusiones ópticas e incluso una ilusión óptica del año, la ilusión de rotación de ejes duales, que originalmente publiqué en Twitter. He hecho muchos tipos diferentes de paisajes. Son realmente divertidos de explorar. Los sistemas caóticos pueden tener resultados muy interesantes. Me encanta lo impredecibles que son. Las simulaciones de física encajan muy bien en un tweet, como partículas o cosas rebotando en el agua, o incluso una especie de física pseudo. He hecho todo tipo de árboles, desde palmeras hasta bambú, cosas en 3D. A menudo me inspiro en conceptos matemáticos para hacer diseños geométricos en los tweets. He hecho muchos túneles y efectos en 3D. También he creado una serie de palabras que se animan para mostrar esa palabra. Es una idea un poco extraña, pero fue muy divertido intentar encajarlas en el tweet. Hay muchos más que he hecho y que otras personas han hecho. Vale la pena ver lo que hay en Twitter. Es increíble lo que hemos logrado y seguimos generando nuevas ideas todo el tiempo.

Entonces, tal vez hayas visto toda esta presentación y estés pensando, ¿por qué escribir TinyCode? Bueno, te puedo decir que es divertido y relajante. Es una de mis cosas favoritas para hacer. También te ayudará a mejorar tus habilidades de programación. Podrás practicar la prototipación de ideas y ser mucho más rápido para hacer que las cosas sucedan. También hay una comunidad a la que puedes unirte e incluso desafiarte con competiciones como la escena de demostración. Hoy tengo un desafío para ti, que es unirte al movimiento TinyCode creando tu propio arte en 140 caracteres y compartirlo en las redes sociales con el hashtag TinyCode.

¿Cuál es el futuro de TinyCode? Constantemente descubrimos nuevas técnicas geniales para hacer posible cosas nuevas y el soporte del navegador también está mejorando, lo que significa que se verá igual en diferentes navegadores y dispositivos móviles. Por supuesto, el lenguaje JavaScript está en constante evolución, lo que significa que a medida que se agregan nuevas funciones, tal vez tengamos más oportunidades de encajar cosas en ese espacio. Y las computadoras también están volviéndose más rápidas, por lo que podemos obtener una salida de mayor resolución y realizar simulaciones más complejas utilizando la misma cantidad de código. Y una de las cosas más nuevas que está sucediendo es la programación asistida por IA, que puede ayudar a explicar cómo funciona este TinyCode e incluso escribirlo. Eso es todo lo que tengo para compartir contigo hoy. Espero que mi charla te inspire a escribir tu propio TinyCode. Como dijo DaVinci, la simplicidad es la máxima sofisticación. Muchas gracias por ver mi charla. Sigue escribiendo código pequeño.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
27 min
Impact: Growing as an Engineer
Top Content
Becoming a web engineer is not easy, but there are tons of resources out there to help you on your journey. But where do you go from there? What do you do to keep growing, and to keep expanding the value you bring to your company? In this talk we’ll look at the different kinds of impact you can have as a web engineer. We’ll walk through what it means to take on bigger, more complex projects, and how to scale yourself, and grow the community around you. By driving our own development we can all grow our impact, and in this talk, we’ll discuss how to go about this.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
“You’ll never believe where objects come from in JavaScript.”
“These 10 languages are worse than JavaScript in asynchronous programming.”
Let’s explore some aspects of JavaScript that you might take for granted in the clickbaitest nodecongress.com workshop.
To attend this workshop you only need to be able to write and run NodeJS code on your computer. Both junior and senior developers are welcome.
Objects are from Mars, functions are from Venus
Let’s deep-dive into the ins and outs of objects and then zoom out to see modules from a different perspective. How many ways are there to create objects? Are they all that useful? When should you consider using them?
If you’re now thinking “who cares?“, then this workshop is probably for you.
Asynchronous JavaScript: the good? parts
Let’s have an honest conversation.
I mean… why, oh why, do we need to bear with all this BS? My guess is that it depends on perspective too. Let’s first assume a hard truth about it: it could be worse… then maybe we can start seeing the not-so-bad-even-great features of JavaScript regarding non-blocking programs.