matiasfha

export actions = {
 prepyment: async ({ request }) => {
    const formData = await request.formData()
    const price = formData.get('price')
    const email = formData.get('email')
    const url = await generateCheckout(price, email)
    return { success: true, url }
 }
}

matiasfha

function App() {
  function [currentWeather, setCurrentWeather] = useState() // No hay estado al principio

   React.useEffect(() => {
     api.local_current("AR")
     .then(data => setCurrentWeather(data))
     .catch(error => {
       console.error(error)
     })
     

matiasfha

## Set credentials 
from dotenv import load_dotenv
load_dotenv()

import cloudinary
import cloudinary.uploader
import cloudinary.api 

import pprint
pp = pprint.PrettyPrinter(indent=2)

matiasfha

export const stringToPastelColour = function (str: string): string {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 6) - hash);
        hash = hash & hash; // Convert to 32bit integer
    }
    const shortened = hash % 360;
    return 'hsl(' + shortened + ',100%,35%)';
};

matiasfha

/*
*  shameless plug: https://www.escuelafrontend.com/articulos/metodos-de-arreglos
*/

const arr = [1,2,3,]

const failureMessages = []

arr.forEach((item) => {
  failureMessages.push("<li>${item}</li>")

matiasfha

/*
* App.jsx main entry
*/
const SomethingElse = React.lazy(() => import('pages/SomethingElse'));
function App() {
  return (
    <BrowserRouter> 
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/somethinElse" component={SomethingElse} />

matiasfha

import * as React from 'react';
import { send } from 'xstate/lib/actionTypes';
import { Info } from './components.styled';
import { StatusMachineContext } from './StatusMachineProvider';
import { useSelectors } from './useSelectors';


export const InfoComponent = () => {
    const { isQueue, isInProgress, isCancelled, isBid } = useSelectors();
    const { statusService } = React.useContext(StatusMachineContext);

matiasfha

const whoAmI = {
  work: "Senior Engineer at Clevertech",
  egghead: "https://matiasfha.dev/egghead",
  escuelafrontend: "https://escuelafrontend.com",
  auth0: "Ambassador",
  cloudinary: "Media Developer Expert",
  AWS: "Communityu Builder",
  "Cafe con Tech": "https://matiasfha.dev/podcast",
  "Control Remoto": "https://controlremoto.io",
  "Site": "https://matiashernandez.dev",

matiasfha

La naturalezas del estado y como domarlas

Existe un cierto acuerdo en la comunidad de desarrolladores sobre algunos temas que comúnmente se ven como grandes problemas: nombrar cosas, caché y manejo de estado. Al crear la interfaz de usuario y las experiencias del usuario a través de aplicaciones web, una de las mayores dificultades es cómo lidiar con el estado de la aplicación.

** Pero, ¿qué es el estado y por qué debe gestionarse? **

La interfaz de usuario es una función del estado. En otras palabras, ** estado es una estructura de datos que representa una instantánea de la realidad en la interfaz de la aplicación ** o más simplemente, es una representación programática de lo que el usuario ve en un momento determinado. El estado es la expectativa que tiene el usuario de cómo debe funcionar la aplicación, esto es parte de la batalla constante que libramos al agregar estado a las aplicaciones. "¿Lo que ve el usuario es exactamente uno a uno con lo que el estado representa internamente?".

matiasfha

/**
 * SEO component that queries for data with
 *  Gatsby's useStaticQuery React hook
 *
 * See: https://www.gatsbyjs.com/docs/use-static-query/
 */

import * as React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"