 Resources from Matias Hernandez in 2024

Web3 is a paradigm shift in how applications are interacted with, ran, and built. 

It’s not just a Pump-and-Dump scheme on cryptocurrencies or Bored Ape NFT profile pictures you can put on Twitter.

A fundamental tenet of Web3 is bringing ownership back to the user. You no longer have to trust that your data is being properly handled on someone else’s server (although, currently Web3 ecosystem mainly depends on centralized infrastructure such as GitHub).  

This ownership is achieved through blockchain, cryptocurrencies, NFTs, and smart contracts.

A great example of this type of ownership is through how you exchange money in Web3. There is no intermediary like Stripe, or PayPal to process your transactions. You can even build your own smart contracts that receive crypto (e.g. Ethereum or ‘eth’ for short) and then process that eth how you’d like.

Building this type of smart contract is exactly what Matías is going to show you how to do right now.

Matías builds out a Web3 application that allows you to receive tips in the form of eth in a tip jar on your website. This means your application will be backed by a smart contract that’s accepts eth, stores data, and emits Solidity events.

The frontend application uses SvelteKit which you’ll see how easy it is to get up and be productive with in minutes. A huge benefit here is that the JavaScript you write is just that, JavaScript. You’ll be able to take what you learn and implement it into any framework of your choosing.

While you build this application you will learn how to:

- Write a smart contract using Solidity language
- Test the smart contract using just JavaScript through the waffle framework
- Communicate and interact with the smart contract using ethers.js in a SvelteKit application
- Deploy your smart contract to make it public and accessible to anyone

Solidity is an object-oriented, high-level language for implementing smart contracts.

solidity

Full Stack Web3 and Blockchain Development on Ethereum with SvelteKit

Una revisión de las nuevas características que la nueva versión de Javascript ES2020 o ES11 trae para esta iteración.  

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Nuevas Características de ES2020 en JavaScript

A collection of lessons that describe how to create a Gatsby source plugin from scratch to npm

Creating a Gatsby Source Plugin

Una colección de lecciones que describen como crear un plugin fuente para Gatsby desde cero hasta su publicación en npm.

Bite-size video tutorials for badass web developers.

egghead

Creación de un plugin de Gatsby desde cero

Personalizing the user experience is becoming more critical every day, even more so if your application or content is consumed by users in different parts of the world who most likely use other languages, date formats, currency, etc.

There are multiple solutions to make your content adapt to the location or language of your users. Still, many of these methods have become outdated, complex, or dependent on a particular framework.

Javascript also offers an internationalization solution, the Intl object.

Javascript Internationalization Object

Manipulación Eficiente de Arreglos con JavaScript

The new React Hooks API allows using different patterns in a simple, direct, and functional way.

In this course, you will find a step-by-step guide to build a complex component using different design patterns implemented with the Hooks API.

We will start with a simple component `<Wizard>` that uses the `useState` hook and in each lesson, we will be improving the implementation by using different strategies.

In the last lessons, we will have a full Wizard component with a flexible API to allow the user to manage the component based on their requirements and You will have learned the use of `useState`, `useReducer`, `useContext`, `useEffect` and `useCallback` along with some popular design patterns to build React applications.

You will be able to find the code and notes for each lesson in the GitHub repository.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Build Advanced Components with React Hooks

La nueva API de React Hooks permite utilizar diferentes patrones de forma sencilla, directa y funcional.

En esta colección encontrarás un paso a paso para construir un componente complejo utilizando diferentes patrones de diseño implementados gracias al uso de la API Hooks.

Comenzaremos con un sencillo componente `<Wizard>` que hace uso del hook `useState` y en cada lección iremos mejorando la implementación mediante el uso de diferentes estrategias.

En la última lección tendremos un componente Wizard completamente flexible al uso del usuario y habrás aprendido el uso de los hooks `useState`, `useReducer`, `useContext` y `useEffect` junto con algunos patrones de diseño populares en la construcción de aplicaciones con React.

Podrás encontrar el código y notas para cada una de las lecciones en el [repositorio en github](https://github.com/matiasfha/egghead-build-wizard-with-hooks-collection).

Cada lección tiene un directorio asociado dentro de `src`, 101, 102, 103, etc. Dentro de cada directorio encontrarás el archivo fuente para el componente `Wizard.js` y un archivo `App.js` con el código que utiliza el componente además de algunas notas extra en el archivo `Readme.md`


Construye Componentes Avanzados con React Hooks y Patrones de Diseño

In this lesson you will learn how to use the eslint yeoman generator to scaffold a new plugin to provide custom rules for your project. 
You will also be able to check the basic skeleton for an eslint ruleand a working example rule to apply a naming convention for async functions.

Scaffold an eslint Plugin with Yeoman

La nueva versión de Javascript trae, entre sus nuevas características la posibilidad de utilizar importación dinámica de forma nativa en el navegador utilizando la misma sintaxis que ya hemos utilizado con webpack/rollup y Babel.

Se trata de la implementación de la sintaxis `import()` que retorna una Promesa permitiendo así importar módulos de forma programática incluso dentro de bloques condicionales, eventos o utilizando la sintaxis `async` y `await`.

Importar módulos de JavaScript de forma dinámica en el navegador

Cómo utilizar encadenamiento opcional para acceder a propiedades opcionales de objetos evitando el uso de multiples condicionales.

Encadenamiento Opcional en JavaScript

ES2020 también incluye un nuevo operador que puede ser utilizado de forma nativa en el navegador. Este operador, llamado fusión nula en español, permite seleccionar el primer valor no null o no undefined de una lista de variables.

Actualmente, utilizamos el operador OR para realizar algo similar, pero el operador OR actúa de forma diferente, ya que selecciona el primer valor no "falsy".
En Javascript existen varios valores "falsy", cómo: 0, NaN, false, null y undefined



Operador Fusión Nula/Nullish Coalescing en Javascript

Javascript ofrece a lo menos 4 formas de completar un arreglo con diferentes valores utilizando solo métodos nativos del lenguaje. Estos métodos permiten crear un arreglo de un tamaño y contenido predefinido.

Es posible utilizar `Array.fill` para crear un arreglo con un tamaño definido y luego utilizar map para completar los items con un valor determinado, como un entero o un string. También es posible completar el arreglo con un objeto, pero es necesario utilizar otra función adicional ya que `Array.fill` copia la referencia al objeto original y no crea multiples objetos únicos. Para resolver esto utilizamos `Array.map`.

Otro método es utilizar un simple ciclo for, pero es un método mutable.

También es posible utilizar los métodos `Array.from` o la sintaxis spread en combinación con la función `Array.map`.


4 formas de llenar un arreglo en Javascript

Javascript ofrece diferentes formas de manipular un arreglo. Una de estas manipulaciones es la necesidad de modificar el contenido de uno de los items de un arreglo, para ello podemos hacer uso de métodos mutables, como utilizar acceso por indice o método inmutables como el uso de la función `Array.map` o una combinación de `Array.findIndex` y `Array.slice`

3 formas de actualizar un arreglo de objetos en JavaScript

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

You will create your own source plugin for gatsby to get external data avaialable through a REST API into gatsby. The plugin will retrieve the data and create the gatsby nodes to make the data available through the gatsby graphql queries so you can use the data into your site.

To create this source plugin you will use some of the methods provided by the gatsby API like `sourceNodes`, `createNode`, `createNodeId` and  `createContentDigest`

Create a Gatsby Source Plugin to Consume an External REST API

Crearás tu propio plugin de fuentes (source plugin) para gatsby para obtener datos de una fuente externa disponible por medio de una API Rest. El plugin integrará los datos como nodos de gatsby y creará las consultas graphql necesarias para ser utilizadas en tu sitio.

Para crear un plugin de fuentes utilizaremos algunos de los métodos que la API de gatsby provee como `sourceNodes`, `createNode`,`createNodeId` y  `createContentDigest`

Crear un plugin de gatsby para consumir datos de una API externa

The plugin that you just implemented, each created node contains an attribute call `artwork_url` that references an URL for an external image. Is possible to directly use that URL to load the images in your site, but the images can big big and take too much time to load. You can optimize this images directly in your plugin to allow the site that use it to drop it directly into `gatsby-image`.


To accomplish the goal of optimizing the external images, your plugin will have to create a new type of node. This new file node will allow the user of your plugin to harness the power of the plugins `gatsby-plugin-sharp` and `gatsby-transformer-sharp` to perform transformations over the image field.


Optimize Remote Images in a Gatsby Source Plugin

En el plugin que has implementado, cada nodo creado contiene un atributo `artwork_url` que hace referencia a la url de una imagen externa. Es posible usar esa URL directamente para cargar las imágenes en tu sitio, pero estas pueden ser muy grandes y tomar mucho tiempo en cargar. Pero es posible optimizar dichas imágenes directamente en el plugin para que el sitio que utilice tu plugin pueda utilizar directamente  `gatsby-image`.


Para lograr optimizar las imágenes externas tu plugin tendrá que crear un nuevo tipo de nodo. Este nuevo nodo tipo archivo permitirá al usuario de tu plugin usar los plugins `gatsby-plugin-sharp` y `gatsby-transformer-sharp` para realizar transformaciones en la imagen.


Optimizar images remotas en un plugin fuente para Gatsby

It's possible to pass configuration parameters to your Gatsby plugin. One use case is just allow the plugin to be used multiple times creating different queries that will be available for your site.

To do this you need to refactor the origin plugin code to accept this parameters and update the `gatsby-config.js` file to set them there.

Use configuration parameters for a Gatsby source plugin

Es posible pasar parámetros que ayuden a configurar tu plugin de Gatsby. Uno de sus caso de uso es permitir que el plugin se utilice multiples veces creando diferentes consultas que estarán disponibles para tu sitio.
Para esto es necesario refactorizar el plugin original para aceptar estos parámetros que son configurados mediante el archivo `gatsby-config.js`

Utilizar parámetros de configuración en un plugin para Gatsby

Github ofrece una nueva característica para mejorar tu perfil de desarrollador. Esto se realiza mediante el uso de un archivo README escrito en markdown dentro de un nuevo respositorio que lleva tu nombre de perfil.
Utilizando este archivo puedes crear un Perfil que contenga toda la información que desees incluyendo imágenes, gif, tablas, etc.

Topics

Instructors

Content Type

Matías Hernández