alexlecco

.meter {
  stroke-linecap: round;
  stroke-width: 8;
  transition: stroke-dashoffset 850ms ease-in-out;
}

.svg-container {
  transform: rotate(-90deg);
  transition: all 1s ease-in-out;
  

alexlecco

function saludar(cb) {                           // definimos la function saludar()
    const mensaje = "hola soy dicky del solar!"; // definimos una constante
    cb(mensaje);                                 // invoco el callback
}

function callback(algo) { // defino el callback
    console.log(algo);    // consoleo el parametro que recibo en el callback
}

saludar(callback); // ejecuta la funcion saludar pasandole el callback

alexlecco

First Things First

• Enable PPA

   sudo apt update
   sudo apt install software-properties-common apt-transport-https curl

• Install apt-fast

alexlecco

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware, compose } from 'redux'
import { Provider } from 'react-redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import reducer from './reducers'
import { getAllProducts } from './actions'
import App from './containers/App'

alexlecco

import React from 'react';
import { Link } from 'react-router-dom'
import {connect} from 'react-redux'
import ItemCard from './ItemCard'
import {showGyms} from '../../actions/index'

const CardContent = (props) => {
    //eliminamos el useEffect, porque ya consultamos los gyms al principio de la app

    return (

alexlecco

import React, {useState, useEffect} from 'react'

const Form = ({gym}) => {
    const [isDisabled, setIsDisabled] = useState(true)
    const [name, setName] = useState('')
    const [description, setDescription] = useState('')
    const [address, setAddress] = useState('')
    const [image, setImage] = useState('')
    const [phone, setPhone] = useState('')
    const [atention, setAtention] = useState('')

alexlecco

Tailwind CSS best practices

Utility classes

1. When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!

2. Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.

3. Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

alexlecco

<style>
  body {
    background-image: url(https://firebasestorage.googleapis.com/v0/b/test-app-161f0.appspot.com/o/mario-email%2Fbackground.jpg?alt=media&token=a71c7ac5-23bc-4dbc-9ba3-43fe5b0a3e79);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-color: #005099;
  }

alexlecco

function format(mask, number) {
  const string = number.replace('-','')
  let result = ''

  for(let iMask = 0, iString = -1; iMask < mask.length && iString < string.length; iMask += 1) {
    const currentChar = mask.charAt(iMask)
    result += currentChar === 'X' ? string.charAt(iString += 1) : currentChar
  }

  return result

alexlecco

onst puppeteer = require('puppeteer');
const username = '58050';
const password = 'toro';


(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    /* page.setViewport({
        width: 1280,