DEV Community: José Antonio Fernández

Your way of programming directly helps financial goals.

José Antonio Fernández — Mon, 22 Sep 2025 15:17:39 +0000

Seven years ago I was starting in tech in Panama with a challenging role for my 7-years-ago self: I was the Administrator of Technological Resources at an institution dedicated to higher education professional training in Panama, part of what was then the world’s largest university network (Laureate).

The organization was undergoing a structural change, and I had the fortune to witness part of it, which was very enriching for developing professional experience.

My role at that time was to analyze hardware/software information and technical requirements to fit the client's needs, especially within the allocated budget.

Indeed, I had to negotiate with suppliers.

I was starting to familiarize myself with very financial terms—Forecast, General Ledger, EBITDA, the stock market, and many more.

Every decision I made had to positively impact that financial goal, so a miscalculation not only affected the final client but also directly impacted the budget execution and, in that vertical, many other business areas. So I learned something important that I apply to every development I do; I call this 'unfavorable planning'.

It is nothing more than planning my execution with the minimum time and resources available, so that I can mentally find creative ways to achieve the same with less, not just reduce to save.

Example: Instead of maintaining separate Adobe Creative Cloud license agreements for different cost centers, group them to get a better volume price and significant savings.

I transferred that thought to my new profession, because instead of focusing on having 10 days to complete the task, I focus on having 5 days. In this way I manage to split and tackle the most important tasks for the success of my execution, and then when I group them, I have the complete solution. It’s basically an assembly process where I create all the functionalities (functions) separately and then I assemble them. After a few days I have something functional and I do the second iteration, the third, the fourth, and in a short time the task is solved, which allows me to invest some time in creating a scalable structure to reduce maintenance costs of the product in the long term.

Programming is like finance: you should find creative ways to invest your time to achieve outcomes in the short, medium, and long term.

I am a software development expert, and that is what I do. You can contact me at my website: www.joseamaya.com

📸 I need a place to store preview screenshots of my React components and a button that says "copy code" to easily paste it into my project. Why is it so hard to find a simple solution for something so straightforward? 🤔

José Antonio Fernández — Wed, 09 Apr 2025 01:37:38 +0000

¿Cómo implementar Tailwind en un tema de Shopify? (ESP)

José Antonio Fernández — Tue, 18 Mar 2025 05:39:15 +0000

El proceso de creación de temas es una de las tareas constamente repetitiva en el proceso de desarrollo de Shopify, especificamente en el desarrollo de temas de Shopify.

Algo importante en este proceso de desarrollo es que gran parte del tiempo es dedicado al desarrollo de secciones.

También desde 2025 en adelante que se empezó con la adopción de bloques como piezas estructurales dentro de la interfaz de usuario con la que un comerciante puede interactuar en el pesonalizador de Shopify.

Ser agil en la implementación de temas de Shopify es primordial.

Voy especificarte como logré agilizar al máximo mi proceso de desarrollo de temas para diferentes comerciantes.

1. Implementación de Tailwindcss como marco CSS para el frontend.

Esto es tan sencillo como ir a la web de tailwind y extraer la CDN de la versión para desarrollo del mismo, o en otras palabras, sencillamente agrega esto dentro de tu archivo theme.liquid:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

2. Debes configurar tu entorno de desarrollo de la siguiente manera:

NPM
NodeJS
TailwindCLI
Shopify CLI

3. Ahora, cuando te asegures que tienes todas las herramientas configuradas debes seguir los siguientes pasos:

*Crear un archivo en el directorio Raiz que se llame: *tailwind.config.js

Agrega la siguiente configuración al archivo tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: [
    '*/*.liquid'
  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

Ejecuta el comando npm init para crear un nuevo paquete en el directorio raiz

Dentro del archivo package.json que se genera al ejecutar npm init debes agregar la siguiente linea de código:

 "tw": "npx @tailwindcss/cli -i ./assets/tailwind.css -o ./assets/output.css"

Debes agregar eel siguiente archivo en la carpeta assets de tu tema de Shopify:
tailwind.css
El archivo debe contener @import "tailwindcss";

Volvamos a leer la linea almacenada en package.json donde veremos el output.css que contiene todos los estilos de nuestras secciones, compilados y optimizados para producción:

Puedes notar que se almacena en assets, lo que hace mucho mas simple el agregarlo al tema de la siguiente forma:

{{ 'output.css' | asset_url | stylesheet_tag }}

Llegados a este punto tienes que tener claro 2 cosas:

Debes comentar la CDN de desarrollo de tailwind que si bien es cierto ayuda a agilizar todo el proceso de desarrollo con tailwindcss.

Probar que todas las secciones, bloques de tu tema se vean correctamente.

Puedes leer mas tips sobre shopify en mi blog personal:
Blog de Shopify - José Amaya
Video de Youtube

2025 - Developer Roadmap

José Antonio Fernández — Tue, 21 Jan 2025 02:19:39 +0000

This is a submission for the 2025 New Year Writing challenge: Compiling 2025.

Mi roadmap para 2025 (Consultaré el mismo con el paso de los días)

Enero ⭐

Aprender sobre los web componentes y subir un proyecto

Febrero ⭐

Aprender sobre WASM y crear un proyecto

Marzo ⭐

Lanzar mi primer MVP de prototipo de Chat avanzado para generar liquid components

Abril ⭐

Empezar la construir de un tema comercial para Shopify

Mayo ⭐

Terminar la construcción del tema y enviar a publicar en Shopify

Junio ⭐

Empezar el desarrollo una app móvil

Julio ⭐

Subir una versión estable a Google Play Store

Agosto ⭐

Encontrar un nicho de mercado y crear un Micro SAAS

Septiembre ⭐

Empezar la construcción del SAAS

Octubre ⭐

Dimensionar y lanzar mi primer MVP

Noviembre ⭐

Certificar en una tecnología en la nube

Diciembre ⭐

Lanzar una plataforma de reviews en Panamá

2024 - Lecciones y más

José Antonio Fernández — Tue, 21 Jan 2025 02:02:19 +0000

This is a submission for the 2025 New Year Writing challenge: Retro’ing and Debugging 2024.

El año 2024 ha sido un gran año para mi, de todas los diferentes aprendizajes voy a resaltar los mas importantes que sin duda le dieron un giro fenomenal a favor.

1. Me especialice en comercio electrónico ⭐

Un increíble viaje durante mas mi 3 año consecutivo desarrollando sobre Shopify me hizo adquirir grandes conocimientos en el área de comercio electrónico, ahora hago implementaciones estratégicas para lograr siempre mejores resultados.

2. Empecé a usar las tecnologías serverless de Cloudflare ☁️

Sí, lancé mi portafolios y usé Cloudflare, muy básico pensado siempre en dar a cliente lo que necesito sobre la tecnología base de mi stack.

link a portafolios

3. Empecé a aprender sobre Micro SAAS y como crear software que se pueda monetizar 📕

Estuve estudiante las leyes locales sobre como monetizar un servicio digital lo cual me dejo abierta una gran gama de posibilidades

4. Aprendí mas a detalle Docker y Google Cloud Run para procesamiento de datos a gran escala

Me gusto mucho la simplicidad de despliegue de Docker en Google Cloud Run, increíblemente genial y potente.

5. Cree mi primer side Project para unificar PDFS

Merge PDF

6. Compre un Dominio para iniciar con un proyecto personal en Panamá, catalogopanama.com 🚀

Sin embargo me tocó posponerlo pero al menos ya tengo un espacio destinado.

7. Empecé a adoptar RemixJS como mi framework base

8. Aprendí a cuidar mucho más mi salud física y mental

Importante para el correcto funcionamiento del cuerpo ya que la profesión así lo amerita.

9. COPILOT COPILOT COPILOT

Sin duda, la integración de Copilot se ha vuelto parte fundamental de mi proceso de desarrollo.

Gracias por leer

Mi nombres es José Amaya y me dedico crear tecnologías para diferentes empresas en Panamá y cualquier parte del mundo

🤝🤝🤝🤝🤝🤝

How use dompdf to generate a simple invoice pdf?

José Antonio Fernández — Mon, 07 Feb 2022 00:34:45 +0000

At this moment to understand the basis in composer I have decided to create a simple pdf generator with Dompdf package.

This package is awesome and simple, to create a pdf invoice solution for download or create an automatic invoice delivery system.

The idea for monetization:
A create simple auth token system with API_KEY and token to receive JSON data for generating pdf in a simple PHP hosting.
Free hosting for testing this:

Free PHP Hosting

Ok, the code:

Step 1:

run this, for a run this you need to install composer
composer require dompdf/dompdf
The Dompdf documentation: :
Dompdf Documentation

Step 2:

Load vendor.autoload.php package

require 'vendor/autoload.php';

Step 3:

Use the main class to create functionalities

// Cargar paquete para usar el modulo de Dompdf
use Dompdf\Dompdf;
use Dompdf\Options;

Create an instance of the class Dompdf

$dompdf = new Dompdf();

Enable remote origins (for download image)

If not enable this, the image not render in the pdf file and break the template format preset

$options = new Options();
$options->set('isRemoteEnabled', true);
$dompdf = new Dompdf($options);

Step 4:

Create an HTML template, with a text string

$htmlTemplate = '
<style>
//all styles for the custom template 
</style>

<html>
  <head>
    <htmlcontent>
    .......
</html>
';

To pass dynamic vars using this format into the string

'.$contenidoDinamico.'

For creating bucle with PHP array using the other var to generate a string with Concat operator (htmlinfo.= 'bucleGetInfo') or array method to push data

Step 5:

Load HTML with loadHtml method of the class instance previously named

$dompdf->loadHtml($content);

Step 6:

Set a size for the page with the setPaper Method

$dompdf->setPaper('A4','landscape');

Step 7:

Server compiled and fusion HTML with a PDF format to create a pdf image:

$dompdf->render();

Step 8:

Write this information of saving in temporal server memory for sending a file to the client request

$dompdf->stream($fileName);

Link al repo

Siguemente en las redes como @syntaxter

[Deleted User]

Crear un formulario interactivo con Figma, CSS, HTML, JS 😀

José Antonio Fernández — Wed, 08 Sep 2021 06:33:34 +0000

Una de las principales razones por las cuales te dedicas a desarrollar software es la mejora constante de tu potencial como programador, quiero que estos post sirvan de ejemplo de la evolución que puedes lograr desarrollando el habito de enfocarte y programar cada día a un nivel que supere tu nivel anterior.

Inspiración

Este proyecto fue creado con la finalidad de promover mi capacidad de desarrollo a nivel CSS/HTML/JS a un nivel muy básico, dentro del mismo intentó representar la forma más simple de emplear algunas pequeñas interacciones solo reutilizando las funciones que se encargan de las diferentes validaciones de los datos dentro del formulario.

El diseño

Bien, como parte importante del trabajo la inspiración de las diferentes imágenes está basada en la siguiente imagen original y el concepto de un formulario desarrollado para el concepto de barbería o cualquier otro tipo de proyecto pero variando la imagen de vector gráfico principal (SVG) construido con figma sin utilizar una herramienta profesional de diseño gráfico.

Las interacciones y el resto de archivos también están construidos en forma solo exportado a CSS con el objetivo de lograr una mejor adaptación del diseño para asegurar una compatibilidad con el resto de dispositivos.

El tecnicismo

Ahora lo importante, destacamos lo más importante el truco CSS y JS para lograr las pequeñas interacciones.

Basándose en un diseño por componentes, está estructurado para que sea escalable lo que permite utilizar un elemento de tipo:

<div class="inputApellido">
    <input
    type="text"
    name="lastName"
    placeholder="Introducir apellido..."
    id="apellido"
    />
    <span data-animacion="true" class="spanApellido inputs"></span>
</div>

Para poder utilizar la gran funcionalidad llamada:
Display grid que nos permite ser tan capaces y arquitectónicos como el mismo Bootstrap con un pequeño adhesivo de complejidad.

form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(calc(1fr * 7));
    grid-column-gap: 50px;
    grid-row-gap: 30px;
    padding: 0px 70px;
}

En todo caso, veamos algo del código JS donde principalmente seleccionas los elementos que estarás evaluando de forma completamente manual.

function validacionCelular() {
    var textVal = celular.value;
    vacio(textVal);
    if (textVal.length > 7) {
        spanCelular.dataset.animacion = "false";
        svgCelular.style.fill = "black";

    } else {
        spanCelular.dataset.animacion = "true"
        svgCelular.style.fill = "none";

    }
}

Con el paso de los años puedes simplemente definir una objeto a través de la información que extraes del form para validar si existe algún campo vacío o para detectar el input en actividad, sin embargo no es lo que necesitamos, son pocos campos y simplemente no representa una ganancia en rendimiento de miles de bytes por lo tanto no invierto tiempo en esto (pero como reto, intentalo).

¡Okay!, prestemos atención al evento de escucha cuando un elemento esté en modo enfoque (que estés dentro del elemento con el fin de hacer algo)

Ahora este otro, que es básicamente un evento que detecta cuando la tecla está presionada, ojo con este evento puede que si el usuario solo presiona y mantiene presionada la tecla te genere datos estúpidamente sucios para joderte (generalmente se trata de algún dev pendejo que no tiene nada que hacer), puedes hacerlo más eficiente con un simple change o un simple input que son eventos maravillosos a la hora de hacer validaciones.

//animadores y validadores
nombre.addEventListener("keyup", validacionNombre);
apellido.addEventListener("keyup", validacionApellido);
correo.addEventListener("keyup", validacionCorreo);
celular.addEventListener("keyup", validacionCelular);
mensaje.addEventListener("keyup", validacionMensaje);

En la parte de refactorización simplemente tengo la misma función que hace visible o invisible la animación de “esta activo y escribiendo” lo cual ahora me parece bastante asqueroso pero así lo hacía antes de dominar al 100% el uso de this, o cualquier otro evento.

// Código que requiere factorización
function interactionCorreo() {
    spanCorreo.style.visibility = "visible"; +
    validacionCorreo();
    test = this.id;
}

function interactionCelular() {
    spanCelular.style.visibility = "visible";
    validacionCelular();
    test = this.id;
}

function interactionMensaje() {
    spanMensaje.style.visibility = "visible";
    validacionMensaje();
    test = this.id;
}

Aquí viene una pequeña lógica de validación, esta validación simplemente es simple no requeriría un If/Else porque seguramente con un operador ternario podría solventar esto, sin embargo me gustan los If ya que aunque no es seguro que los recuerde en 3 meses si tengo agregar algún módulo o funcionalidad integrado con el form no tendré ni puta idea de que hacía este formulario con ese operador ternario (después de tu primer proyecto empresarial sabes que esto es una maldición de código de la que no te librarás.

En fin, espero que tengas una idea básica de cómo construir validaciones con JS e interacciones que se alimentan de esa validación.

Este es mi correo profesional jose@joseamaya.tech, si me escribes te aseguro que tendrás una respuesta.

Atentamente,

José A. Amaya

Link al repo

Link a la demo

Siguemente en las redes como @syntaxter

Vista para extraer datos de cohetes desde SpaceX API 🍋

José Antonio Fernández — Fri, 20 Aug 2021 00:30:00 +0000

Hablemos rápidamente sobre como hacer renderizado desde el cliente con Literal Strings (ES6).

No necesitas manipular un Shadow Dom, o crear custom elements, ni tampoco templates con todas tus funcionalidades porque puedes implementar o inyectar código Javascript directamente desde el cliente y pasarlo como parte del contenido HTML de un elemento contenedor con el famoso innerHTML.

El famoso innerHTML:

        contenedorCardsData.innerHTML += `
                            <div class="contenedorCardsItems">
                                <h4>${element.serial}</h4>
                                <div class="contenedorStatus">
                                    <span class="blue">${element.type}</span>
                                    <span class="yellow">${element.status}</span>
                                </div>

                                <div class="contenedorTextos">
                                    <p class="descripcion">${element.last_update}</p>
                                    <p class="fechaLanzamiento">Fecha de Lanzamiento</p>
                                    <p class="fechaLanzamientoContent">${element.original_launch}</p>
                                </div>
                            </div>
                            `;
    } else {

        // Pasar código para mostrar advertencia de que no existen resultados

    }
}

Siendo este un desarrollo que me tomó mas o menos 15 min crearlo, tiene muchas cosas que mejorar por lo que puedes agrear tus propias mejoras, puedes agregar filtros, de hecho el botón del filtro esta listado en la UI solo debes agregarle funcionalidad y practicar ya que el código para pasar peticiones fetch lo tienes acá:

async function busqueda() {
    var categorie = document.querySelector('#categoria').value;
    var spacexApi = await fetch(`https://api.spacexdata.com/v4/${categorie}`);
    return spacexApi;
}

Tres lineas de código que te permiten obtener la respuesta y poder manejarla como promesa para poder hacer con ella lo que quieras.

Veamos como se ve el diseño final 🍋

Los elementos amarrillos tienen una pequeña animación de loading, abajo verás el código.

🍋 Solo se basa en un par de parametros que pasas a través de Fetch

Como siempre, trato de dejar el código de la forma mas entendible posible para que puedas reutilizar los estilos en cualquiera de tus frameworks favoritos, finalmente cuando envias la petición a través de fetch puedes manejar directamente esa respuesta, gracias a que el endpoint de SpaceX API te genera el resultado en base al query que estas haciendo y sin usar ní una sola clase.

¿Conocimiento importantes para el desarrollo?

fetch API

:root {
    --main-bg-color: #0E0E0E;
    --secondary-bg-color: #161616;
    --blue-color: #4E54FF;
    --yellow-color: #F4E236;
    --bg-cards: rgba(255, 255, 255, 0.103);
}
}

CSS ( Grid / Flex / Keyframes )

header {
    height: 200px;
    width: 100%;
    display: grid;
    grid-template-columns: 20% 30% 20% 15% 15%;
    grid-template-rows: 100px;
}

CSS / Animación previa a la búsqueda

.loading::before {
    content: "";
    width: 40px;
    height: 100%;
    background: linear-gradient(96.4deg, rgba(255, 255, 255, 0) 4.54%, rgba(255, 255, 255, 0.265283) 57.15%, rgba(255, 255, 255, 0) 94.26%);
    position: absolute;
    opacity: .4;
    animation: move 1s infinite;
}

//el keyframe
@keyframes move {
    0% {
        transform: translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateX(200px) rotate(20deg);
    }
    100% {
        transform: translateX(0px) rotate(0deg);
    }
}

CSS / Estilización de la lista

.listaSeleccion {
    display: flex;
    justify-content: center;
    align-items: center;
}

.listaSeleccion select {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    background-color: transparent;
    border: none;
    outline: none;
    font-family: Montserrat;
    font-weight: 500;
    color: var(--main-yellow);
}

.listaSeleccion select * {
    background-color: var(--main-blue);
    border: none;
    box-shadow: none;
}

.listaSeleccion select>option {
    background-color: var(--main-blue);
    border: none;
    box-shadow: none;
    color: var(--main-yellow);
}

Javascript / Manejador de eventos principal


search.addEventListener('click', function(e) {
    let select = categorie.value;
    let string = txtSearch.value;
    busqueda()
        .then(data => { return data.json() })
        .then(res => {
            // console.log(res);
            contenedorCardsData.innerHTML = "";
            if (select == "capsules") {
                res.forEach(element => {
                    busquedaCapsules(element, string);
                })
            } else if (select == "history") {
                res.forEach(element => {
                    buscarHistory(element, string);
                })
            }

        });


});

CSS / Microinteraction para el filtro


.contenedorFilter span {
    width: 25px;
    height: 2px;
    margin: 3px;
    background-color: var(--main-blue);
    transition: .4s;
    cursor: pointer;
}

.contenedorFilter:hover span {
    width: 35px;
}

.contenedorFilter:hover span:nth-child(2) {
    width: 10px;
}

.contenedorFilter span:nth-child(2) {
    width: 15px;
    height: 2px;
    margin: 3px;
    background-color: var(--main-yellow);
}

.contenedorFilter span:nth-child(3) {
    width: 10px;
    height: 2px;
    margin: 3px;
    background-color: var(--main-yellow);
}

.contenedorFilter:hover span:nth-child(3) {
    width: 5px;
}

Sí no conoces CSS, JS te costará mil veces .

Este código no ha sido testeado, por lo tanto lo puedes mejorar mil veces mas

Parte importante de tu aprendizaje en web design, es la utilización de APIs y manejo del DOM con un enfoque en desarrollo web 2021, evita esmerarte en que tu aplicación sea compatible con IE, ya tiene una muerte anunciada así que mejorar preparate para adentrarte en del desarrollo mordenos, APIS, Frameworks, Javascript Moderno...

Es el encarga de cambiar la propiedad de display none a block y viceversa, puedes animar la transición del elemento contenedor como práctica o simplemente dejarlo como está actualmente.

Este es mi correo profesional jose@joseamaya.tech, si me escribes te aseguro que tendrás una respuesta.

Atentamente,

José A. Amaya

Link al repo

Link a la demo

Siguemente en las redes como @syntaxter

Dashboard simple en NodeJS x ExpressJS 🍋

José Antonio Fernández — Sat, 14 Aug 2021 05:03:42 +0000

Este fue uno de mis primeros diseños enfocados en el aprovechamiento de un backend que gestionaba el envío masivo a través de un hosting basado en PHP para obtener un archivo CSV, transformarlo a JSON y luego decodificarlo.

Abajo te explico como utilizar este diseño en tu web o relacionarlo con otros mencionandote las clases principales.

Veamos como se ve el diseño final 🍋

🍋 Y también tiene un campo para introducción de datos

Esto lo puedes reciclar como un componente para un framework o simplemente usarlo como JS simple para gestionar peticiones para almacenar datos en una db, json o cualquier lugar donde lo utilices de forma recurrente.

¿Conocimiento importantes para el desarrollo?

CSS / Variables

:root {
    --main-bg-color: #0E0E0E;
    --secondary-bg-color: #161616;
    --blue-color: #4E54FF;
    --yellow-color: #F4E236;
    --bg-cards: rgba(255, 255, 255, 0.103);
}
}

CSS / Display grid

element {
    display: grid;
    grid-template-columns: 30% 70%;
}

CSS / Display Flex

.contenedorLogo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

CSS / Mixing CSS Hover Parent to Child

.contenedorPerfil img:hover~span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateX(7px);
    background: var(--blue-color);
    transition: 0.5s;
}

CSS / Postion Fixed

.pencil {
    position: fixed;
    width: 75px;
    height: 75px;
    background-color: var(--yellow-color);
    left: 50px;
    bottom: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

CSS / Postion reset styles (inputs)

.formularioArchivo input {
    width: 80%;
    height: 40px;
    border: none;
    border-bottom: 3px solid var(--yellow-color);
    margin: 20px;
    padding: 10px;
    background: transparent;
    outline: none;
    font-size: 1.3rem;
    color: #fff;
}

CSS / Microinteraction for close button

#closeOpen::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: var(--yellow-color);
    transform: rotate(45deg);
    transition: .4s;
}

#closeOpen:hover::after {
    transform: rotate(0deg);
    transition: .4s;
}

#closeOpen::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: var(--yellow-color);
    transform: rotate(-45deg);
    transition: .4s;
}

#closeOpen:hover::before {
    transform: rotate(0deg);
    transition: .4s;
}

Sí no conoces CSS te costará mil veces .

El código en Javascript que permite mostrar/ocultar el formulario de carga de contenido

Este formulario solo contiene datos importantes para completar la funcionalidad de carga del elemento principal, este elemento permite que puedas enviar una petición, put, post, delete, get para renderizar los datos desde el servidor tienes el botón principal para procesar todos estos.

Código en js / Frontend

closeOpen.addEventListener('click', () => {
    contenedorPopUp.style.display = "none";
})

pencil.addEventListener('click', () => {
    contenedorPopUp.style.display = "grid";
})

Es el encarga de cambiar la propiedad de display none a block y viceversa, puedes animar la transición del elemento contenedor como práctica o simplemente dejarlo como está actualmente.

Este es mi correo profesional jose@joseamaya.tech, si me escribes te aseguro que tendrás una respuesta.

Atentamente,

Link al repo

Link a la demo

Siguemente en las redes como @syntaxter

José A. Amaya

🏀 Animación de cards al estilo Jordan 🏀

José Antonio Fernández — Fri, 13 Aug 2021 04:16:22 +0000

Este diseñ fue creado usando unicamente css y html, lenguajes de programaciones sobre los cuales se fundamente la web.

Abajo te explico como utilizar este diseño en tu web o relacionados otros de tus elementos para crear una mejor experiencia de usuario.

Veamos como se ve el diseño final

¿Conocimiento importantes para el desarrollo?

CSS / Position Relative

.card {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10000;
    transition: 0.6s;
}

CSS / Position Absolute

img {
    position: absolute;
    max-width: 280px;
    left: 20px;
    top: 80px;
    transform: rotate(-35deg);
    transition: 0.5s;
}

CSS / Hover Selector

.contenedor:hover .card img {
    left: 20px;
    top: 40px;
    transition: 0.5s;
}

CSS / ::Before and After Pseudo ELements

.contenedor:hover::before {
    width: 250px;
    height: 250px;
    right: -35px;
    top: -30px;
}

Sí no conoces CSS te costará mil veces .

El código en Javascript que permite cambiar las zapatillas

Es bien sabido que javascript es el lenguaje por mucho mas usado en la web, pero para generar dinamismo esto puede servirte como un compoente y de esa forma te permite generar ids, enlaces dinamicos entre otras cosas para que tus compoentes sean totalmente reactivos o simplemente integrar la card a un motor de plantilla o lo que quieras hacer con ella.

Código en js

btnMorado.addEventListener("click", () => {
    document.getElementById("imagen").src = "img/awesome-shoes-violet.png";
});

Qué simplemente detecta el elemento y te permite cambiar dinamicamente la imagen previamente almacenada en el repo, o generar una función para extraer estos datos desde el backend y generar ids personalizados de forma dinamica y no manual que es mi caso particular.

Este es mi correo profesional jose@joseamaya.tech, si me escribes te aseguro que tendrás una respuesta.

Atentamente,

Link al repo: Github Repo

Link a la demo: Demo

José A. Amaya

Escenarios: La creación de APIs en la empresa

José Antonio Fernández — Tue, 10 Aug 2021 22:47:07 +0000

Entre mas pasa el tiempo se vuelve mas necesario entender los principios del desarrollo de #APIs (#REST/#HTTP).

Mira este escenario:
Tienes una base de datos local a la que le inyectas semanalmente los nuevos correos registrados pero esto es tan manual como descargar un archivo csv y ingresarlo a un #CRM que valida la existencia o no de los registros.

Dependiendo si es nuevo, si existe, si tiene error el procesa los envios masivos.

La mejora (considerando que se usa #WP u otro #CMS):
WordPress proporciona un acceso a los registros de nuevos suscriptores y este es validado con un token, y credenciales que fueron generadas por la API de WP de esta forma puedes gestionar con un API + #Middleware un gateway diseñado de forma local esta integración para extraer esos datos desde WP de automáticamente.

Esto se genera con una tarea en el CRM que extrae los datos desde nuestro API, este API hace un balanceo para no sobrecargar el servidor y nuestro middlware limpia los registros de espacios o caracteres o cadenas de texto maliciosas antes de llegar a su destino.

Ahora, este mismo API tiene un punto final donde el equipo de ventas puede ver el total de los nuevos registros procesados o nuevas personas que visualizaron la campaña o que interactuaron.

Lo genial, sí mañana ventas decide que su CRM no le es funcional solo debe apuntar el nuevo CRM hacia nuestra ruta (dentro de nuestro API local) y evitar tener que construir un nuevo módulo para extraer o inyectar estos datos.

Con la facilidad de que si usas un sistema replica (a nivel de VM/#Serverless/Cloud Computing) tu servicio en producción jamás se verá afectado tan sencillo como eso.

La zona de confort del programador

José Antonio Fernández — Wed, 04 Aug 2021 23:54:19 +0000

En todas las profesiones modernas existe un punto en el cual el crecimiento como profesional se verá estancado, cuando eres consciente de que estás estancado y no quieres crecer por miedo, por comodidad en ese momento entras a tu zona de confort.

Siempre que te mantengas bajo un paraguas empresarial debes saber que la forma más favorable de permanecer en el trabajo es demostrando que sabes lo que haces y que tienes conocimiento (muchas no significa traer nuevas formas de hacer las cosas).

No sabes cuántos programadores se quedan estancados en un solo lugar y cuando la realidad decide abrirle los ojos se dan cuenta que esa realidad a la que se adaptaron por muchos años de servicio a una empresa cambió totalmente (esto es muy riesgoso cuando estás en esta profesión).

La cosa es es que al estar en una empresa en la que te sientes muy cómodo generalmente tiene el patrón de no cambiar la forma en que hace las cosas y eso significa que ahora el conocimiento que estas adquiriendo es mucho menor al que adquiriste para llegar donde estás y dejas de ser competitivo, pregúntate:

¿Si salgo de aquí y voy al mercado nuevamente, soy alguién que una empresa contrataría y por qué?

Es por eso que en algún momento debes mejorar habilidades como comunicación, liderazgo, oratoria y empatía porque es bien sabido que aunque amemos lo que hacemos hoy en 20 años puede que ya no sea así y dejes de hacer algo que amas a pasar a hacer algo por lo que te pagan.

Nunca debes pensar a corto plazo, todas tus luchas de hoy deben significar algo en tu futuro lejano porque hoy resistimos todo pero en 20,30,40 años creeme que nuestra opinión será otra.

desarrolloweb #programacion #programador #tecnologia #sistemas #emprender #motivacion #diseñoweb #disenoweb #disenoui

DEV Community: José Antonio Fernández

Your way of programming directly helps financial goals.

📸 I need a place to store preview screenshots of my React components and a button that says "copy code" to easily paste it into my project. Why is it so hard to find a simple solution for something so straightforward? 🤔

¿Cómo implementar Tailwind en un tema de Shopify? (ESP)

1. Implementación de Tailwindcss como marco CSS para el frontend.

2. Debes configurar tu entorno de desarrollo de la siguiente manera:

3. Ahora, cuando te asegures que tienes todas las herramientas configuradas debes seguir los siguientes pasos:

El archivo debe contener @import "tailwindcss";

Llegados a este punto tienes que tener claro 2 cosas:

2025 - Developer Roadmap

Mi roadmap para 2025 (Consultaré el mismo con el paso de los días)

Enero ⭐

Febrero ⭐

Marzo ⭐

Abril ⭐

Mayo ⭐

Junio ⭐

Julio ⭐

Agosto ⭐

Septiembre ⭐

Octubre ⭐

Noviembre ⭐

Diciembre ⭐

2024 - Lecciones y más

1. Me especialice en comercio electrónico ⭐

2. Empecé a usar las tecnologías serverless de Cloudflare ☁️

3. Empecé a aprender sobre Micro SAAS y como crear software que se pueda monetizar 📕

4. Aprendí mas a detalle Docker y Google Cloud Run para procesamiento de datos a gran escala

5. Cree mi primer side Project para unificar PDFS

6. Compre un Dominio para iniciar con un proyecto personal en Panamá, catalogopanama.com 🚀

7. Empecé a adoptar RemixJS como mi framework base

8. Aprendí a cuidar mucho más mi salud física y mental

9. COPILOT COPILOT COPILOT

Gracias por leer

How use dompdf to generate a simple invoice pdf?

Step 1:

Step 2:

Step 3:

Create an instance of the class Dompdf

Enable remote origins (for download image)

Step 4:

Step 5:

Step 6:

Step 7:

Step 8:

[Deleted User]

Crear un formulario interactivo con Figma, CSS, HTML, JS 😀

Inspiración

El diseño

El tecnicismo

Vista para extraer datos de cohetes desde SpaceX API 🍋

Veamos como se ve el diseño final 🍋

🍋 Solo se basa en un par de parametros que pasas a través de Fetch

¿Conocimiento importantes para el desarrollo?

Este código no ha sido testeado, por lo tanto lo puedes mejorar mil veces mas

Dashboard simple en NodeJS x ExpressJS 🍋

Veamos como se ve el diseño final 🍋

🍋 Y también tiene un campo para introducción de datos

¿Conocimiento importantes para el desarrollo?

El código en Javascript que permite mostrar/ocultar el formulario de carga de contenido

🏀 Animación de cards al estilo Jordan 🏀

Veamos como se ve el diseño final

¿Conocimiento importantes para el desarrollo?

El código en Javascript que permite cambiar las zapatillas

Link al repo: Github Repo

Link a la demo: Demo

Escenarios: La creación de APIs en la empresa

La zona de confort del programador

desarrolloweb #programacion #programador #tecnologia #sistemas #emprender #motivacion #diseñoweb #disenoweb #disenoui

El archivo debe contener `@import "tailwindcss";`