DEV Community: Paul Contreras

The 5 MB Homework Limit That Turned Me Into an App-Builder

Paul Contreras — Fri, 01 Aug 2025 22:13:33 +0000

This semester I snapped a neat, high-res photo of my handwritten math assignment and went to upload it to my university platform.

Error: “File must be under 5 MB.”
I tried again with a different angle—same error. Then the portal complained about the HEIC format my iPhone uses by default.

What I tried next

Google results sent me to web compressors that wanted my personal photos on their servers (nope).
The first “free” iOS app threw three ads at me before I could pick a file.
A second app asked for $4.99 per month, just to shrink a picture!

I ended up opening Preview on my Mac, exporting, tweaking quality sliders, re-sending to my phone, and finally hitting “Submit” with seconds to spare. The whole thing took longer than writing the homework.

That night I wrote Crunch, an offline photo compressor that fixes the exact pain I felt.

What Crunch does now

Shrinks JPEG, HEIC, PNG images by up to 70 %, totally on-device (no uploads)
Converts formats so HEIC becomes JPG or PDF in one tap
Cleans out location + EXIF data before you share a file
Free: 10 photos a day. Pro: one-time $3.99—no subscriptions, ever

Try Crunch for iOS now: Crunch on AppStore

Follow me on x where I’m sharing progress, mistakes, your feedback will shape the next update—features, pricing, UX, anything.
@3nginuity

🔐 Building a Simple Password Generator with FastHTML

Paul Contreras — Sat, 24 Aug 2024 01:25:13 +0000

Are you looking to build a lightweight web application that’s both functional and stylish? In this tutorial, we’ll walk through creating a simple password generator using FastHTML — a minimalist Python-based HTML templating engine — and Tailwind CSS for sleek and responsive design.

🚀 What You’ll Build

We’ll create a web application that allows users to input the desired length of a password and generate a strong, random password on the fly. This tutorial is perfect for developers who want to explore FastHTML and HTMX, combined with the power of Tailwind CSS for simple front-end styling.

👨‍💻 Prerequisites

Before we dive in, make sure you have Python installed on your machine. We’ll be using the following libraries:

FastHTML: For our application.
You can install the required library with:

pip install python-fasthtml

🛠️ Step 1: Setting Up Your FastHTML App

Let’s start by setting up our FastHTML application. FastHTML is a lightweight HTML templating engine that allows you to create HTML elements directly in Python, making your code clean and easy to manage.

# Importing libraries
from fasthtml.common import *
import string
import secrets

# Defining the FastHTML app
app = FastHTML(
    hdrs=(
        # Add Tailwind CSS
        Script(src="https://cdn.tailwindcss.com"),
    )
)

Here, we import the necessary libraries and initialize our FastHTML app, embedding Tailwind CSS directly via CDN for rapid styling.

🎨 Step 2: Creating the User Interface

Next, we’ll design a simple form where users can input the desired password length. Tailwind CSS will make our form both functional and visually appealing.

@app.route('/')
def home():
    title = "Password Generator - With FastHTML"
    form = Form(
        Input(id="length_input", type="number", placeholder="Enter the length",
              cls="border-2 border-gray-400 rounded-md p-2"),
        Button("Generate", cls="bg-slate-900 text-white p-2 rounded-md mt-2"),
        cls="flex flex-col items-center mt-10",
        hx_post="/generate",
        target_id="result",
        hx_swap="innerHTML"
    )
    result = Div(id="result", cls="text-center mt-10")

    return Title(title), Main(H1(title, cls="text-3xl text-center mt-10"), form, result)

This function renders our homepage, which includes a form for password generation. The form leverages HTMX to send the input data to the server and dynamically update the result without a full page reload. This makes the user experience seamless and responsive.

🔒 Step 3: Implementing the Password Generator Logic

Now, let’s implement the logic to generate a secure password based on the user’s input.

alph = string.ascii_letters + string.digits + string.punctuation


@app.route("/generate")
def post(length_input: int):
    length = length_input
    if length < 8:
        return "Password length should be greater than 8 characters"
    password = ''.join(secrets.choice(alph) for i in range(length))
    return password

In this snippet, we define the character set for our password and implement the generator logic. We ensure the password length is secure (minimum of 8 characters) and then generate a random password using Python’s secrets module, which is designed for cryptographic applications.

▶️ Step 4: Running Your Application

To get your app up and running, simply run the following command:

if '__main__' == __name__:
    serve()

Now, visit http://127.0.0.1:5001 in your browser, and you'll be greeted with your new password generator!

🎉 Conclusion

Congratulations! You’ve just built a fully functional password generator using FastHTML and Tailwind CSS. This project is a fantastic way to get acquainted with Python-based web development, HTMX for dynamic content, and Tailwind CSS for modern, responsive design.

💾 Check Out the Full Source Code

Want to dive deeper into the code or contribute to the project? The full source code is available on GitHub. Feel free to clone, fork, or star the repository:

pol-cova / password-generator-fasthtml

Simple password generator using FastHTML

🔐 Password Generator with FastHTML

This repository contains a simple password generator web application built using FastHTML and styled with Tailwind CSS. The application allows users to generate secure, random passwords based on a user-defined length.

🚀 Features

Secure Password Generation: Uses Python's secrets module for cryptographic randomness.
Responsive Design: Styled with Tailwind CSS for a clean and modern look.
Dynamic Updates: Utilizes HTMX for seamless, asynchronous password generation.

📦 Prerequisites

Make sure you have Python installed on your machine. You can install the necessary dependencies with:

pip install python-fasthtml

🛠️ Installation

Clone this repository to your local machine:

git clone https://github.com/pol-cova/password-generator-fasthtml.git

Navigate to the project directory:

cd password-generator-fasthtml

▶️ Running the Application

To start the application, simply run:

python app.py

You can now access the application by navigating to http://localhost:5001 in your web browser.

Tutorial

You can find a detailed tutorial on how to build…

View on GitHub

Introducción a C++: parte 4 Funciones

Paul Contreras — Thu, 04 Apr 2024 08:20:23 +0000

¡En esta cuarta parte, vamos a descubrir el poder de las funciones en C++! Imagina tener una caja de herramientas repleta de funciones listas para usar en tu código. ¡Y lo mejor de todo es que estas funciones te ayudarán a aplicar el principio DRY (Don't Repeat Yourself), haciendo que tu código sea más eficiente y fácil de mantener! ¿Emocionado? ¡Vamos a sumergirnos en el mundo de las funciones!.

Estructura basica de una función

// Estructura basica 
tipoDeRetorno nombreFuncion(argumentos){
// Bloque de codigo
}

Donde:

tipoDeRetorno es el tipo de dato que la función devolverá al final de su ejecución. Puede ser void si la función no devuelve ningún valor.
nombreFuncion es el nombre que le das a tu función, mediante el cual la llamarás desde otras partes del programa.
argumentos son los valores que la función puede recibir como entrada. Pueden ser cero o más, separados por comas si hay más de uno.

Dentro del bloque de código de la función, es donde escribes las instrucciones que deseas que la función realice cuando sea llamada. ¡Es como un pequeño programa dentro de tu programa!

Tipos de retorno

void: Indica que la función no devuelve ningún valor. Se utiliza cuando la función solo realiza tareas y no necesita devolver ningún resultado.
int, float, double, char, etc: Indica que la función devuelve un valor de tipo entero, flotante, doble, caracter, etc. Puedes ajustar el tipo según lo que necesites que la función retorne.
string: Indica que la función devuelve un valor de tipo string. Útil para funciones que generan o manipulan cadenas de caracteres.
bool: Indica que la función devuelve un valor booleano, es decir, verdadero (true) o falso (false).

Nombres de funciones

Cuando nombras una función en C++, es importante seguir algunas convenciones simples:

CamelCase: Comienza con una letra minúscula y las palabras subsecuentes comienzan con mayúscula.
Ejemplo: calcularSuma, ordenarArray, imprimirMensaje
Descriptivo: Usa nombres que describan claramente la función de la función.
Evita abreviaturas excesivas: Usa abreviaturas solo si son claras y ampliamente entendidas. Siguiendo estas pautas, tu código será más fácil de entender para ti y para otros desarrolladores.

Argumentos

Cuando hablamos de argumentos en una función de C++, nos referimos a los valores que se pasan a la función cuando es llamada. Estos argumentos pueden ser variables, constantes u otros valores, y se utilizan para proporcionar datos a la función para que pueda realizar su tarea.

Por ejemplo, en la función sumar(int a, int b), los argumentos son a y b, que son dos números enteros que queremos sumar. Cuando llamamos a esta función, pasamos los valores que queremos sumar como argumentos: sumar(5, 3).

Es importante recordar que los argumentos deben coincidir en tipo y cantidad con los parámetros definidos en la función. Además, en C++, los argumentos pueden ser expresiones, variables o incluso llamadas a otras funciones, siempre que el tipo coincida con el parámetro correspondiente de la función.

Prototipo de funciones en c++

En C++, los prototipos de funciones permiten declarar funciones antes de que se utilicen en el código. Esto es útil para proporcionar al compilador información sobre la firma de la función, como su tipo de retorno y los tipos de parámetros que espera.

Ejemplo

Para este ejemplo, el prototipo de la función Saludo se declara antes de la función main. La función Saludo se define después de main. Esto permite que el compilador sepa cómo es esta función antes de que sea utilizada en el código principal. La función Saludo simplemente imprime "¡Hola, mundo!" en la consola cuando se llama desde main.

Insertion sort in C++

Paul Contreras — Thu, 29 Feb 2024 03:06:48 +0000

Introducción

En términos simples el insertion sort es como ordenar una mano de cartas:

Empiezas con la segunda carta y la comparas con la primera. Si la segunda carta es más pequeña, las intercambias.
Ahora, las dos primeras cartas están ordenadas.
Pasas a la tercera carta y la comparas con la segunda. Si es más pequeña, la mueves a la posición correcta entre las cartas ya ordenadas.
Repites este proceso con cada carta hasta que toda la mano esté ordenada.

Mira este gif para entenderle mejor:

Programa para ordenar un array con inserción

El primer paso es identificar las funciones que podremos utilizar para este programa, las cuales serian: printArray, fillArray, insertion.

printArray: Esta función se utiliza para imprimir el arreglo.
fillArray: Esta función se utiliza para llenar el arreglo con los datos que da el usuario.
insertion: Esta función se utiliza para realizar el ordenamiento.

`printArray`

La función printArray recibe un arreglo de números enteros y su tamaño. Luego, imprime los elementos del arreglo en la consola, separados por comas y encerrados entre corchetes. Por ejemplo, si se pasa el arreglo {1, 2, 3, 4, 5}, la función imprimirá [1, 2, 3, 4, 5]. Esto permite visualizar fácilmente los elementos del arreglo en un formato legible.
Codigo:

// Print array function
void printArray( const int *userArray , int size){
    // Imprimir cada elemento con un for loop
    cout << "[" << userArray[0];
    for (int i=1; i < size; ++i){
        cout << "," << userArray[i];
    }
    cout << "]" << endl;
}

`fillArray`

La función fillArray recibe como argumento un puntero a un arreglo de enteros y el tamaño del arreglo. Utiliza un bucle for para iterar sobre cada posición del arreglo. En cada iteración, le pide al usuario que ingrese un valor para esa posición del arreglo utilizando cin >> userArray[i];. De esta manera, la función permite al usuario llenar un arreglo con valores ingresados desde el teclado.
Codigo:

// Fill array
void fillArray(int *userArray, int size){
    // For loop para ingresar elementos
    for (int i = 0; i < size; ++i) {
        // utilizo i+1 para facilitar al usuario el ingresar el elemento
        cout << "Ingrese elemento " << i+1 << " : ";
        // leemos de teclado y lo almacenamos en el arreglo en la posición i
        cin >> userArray[i];
    }
}

`insertion`

La función insertion toma un arreglo de números enteros, lo copia, lo ordena utilizando el algoritmo de ordenación por inserción y luego muestra el arreglo original y el arreglo ordenado. Esto ayuda a los principiantes a comprender cómo funciona el algoritmo de inserción y cómo se pueden ordenar los arreglos en la práctica.

// Insertion algorithm
void insertion(const int *userArray, int size){
    // Print header
    cout << setfill('-') << setw(40) << "" << endl;
    cout << "|           Insertion sort          |" << endl;
    cout << setfill('-') << setw(40) << "" << endl;
    // Puntero temporal asociado al arreglo
    auto *sortedArray = new int[size];

    // Copia del arreglo dado por el usuario
    for (int i=0; i<size; ++i){
        sortedArray[i] = userArray[i];
    }

    // Insertion algorithm
    for (int i=1; i<size; ++i){
        int k = sortedArray[i];
        int j = i-1;
        while (j >= 0 && sortedArray[j] > k){
            sortedArray[j+1] = sortedArray[j];
            --j;
        }
        sortedArray[j+1] = k;
    }

    // Mostrar resultados
    cout << "Original array: ";
    printArray(userArray,size);
    cout << endl;
    cout << "Sorted array: ";
    printArray(sortedArray,size);
    cout << endl;
    // Deallocate memory
    delete [] sortedArray;
}

Implementación

Ahora que ya sabemos cuales funciones utilizaremos, tendremos que saber como implementarlas, en el archivo main.cpp tenemos esto:

// Encabezados
// librerías estándar
#include <iostream>
#include <iomanip>
using namespace std;

// Prototipo de las funciones 
// Esto se utiliza para no tener problema con la definición de las funciones 
// cuando se utilizan en el código principal. Ayuda al compilador a conocer 
// la firma de las funciones antes de que se definan más adelante en el código.

void printArray( const int *userArray , int size);
void fillArray(int *userArray, int size);
void insertion(const int *userArray, int size);

// Funcion principal

int main() {
        // Variable para almacenar el tamaño deseado del arreglo
    int size;
        // Variable para almacenar el arreglo de enteros ingresados por el usuario
        int *array;

    // Solicitamos la cantidad de elementos 
    cout << "Ingrese la cantidad de elementos para su arreglo: ";
    cin >> size;
    // Definimos arreglo con el tamaño ingresado por el usuario
    array = new int[size];
    // Llenamos el arreglo
    fillArray(array, size);
    // Ordenamos el arreglo
    insertion(array, size);
    // deallocate memory
    delete [] array;
    return 0;
}

// Funciones desarrolladas
// Print array function
void printArray( const int *userArray , int size){
    // Imprimir cada elemento con un for loop
    cout << "[" << userArray[0];
    for (int i=1; i < size; ++i){
        cout << "," << userArray[i];
    }
    cout << "]" << endl;
}

// Fill array
void fillArray(int *userArray, int size){
    // For loop para ingresar elementos
    for (int i = 0; i < size; ++i) {
        // utilizo i+1 para facilitar al usuario el ingresar el elemento
        cout << "Ingrese elemento " << i+1 << " : ";
        // leemos de teclado y lo almacenamos en el arreglo en la posición i
        cin >> userArray[i];
    }
}

// Insertion algorithm
void insertion(const int *userArray, int size){
    // Print header
    cout << setfill('-') << setw(40) << "" << endl;
    cout << "|           Insertion sort          |" << endl;
    cout << setfill('-') << setw(40) << "" << endl;
    // Puntero temporal asociado al arreglo
    auto *sortedArray = new int[size];

    // Copia del arreglo dado por el usuario
    for (int i=0; i<size; ++i){
        sortedArray[i] = userArray[i];
    }

    // Insertion algorithm
    for (int i=1; i<size; ++i){
        int k = sortedArray[i];
        int j = i-1;
        while (j >= 0 && sortedArray[j] > k){
            sortedArray[j+1] = sortedArray[j];
            --j;
        }
        sortedArray[j+1] = k;
    }

    // Mostrar resultados
    cout << "Original array: ";
    printArray(userArray,size);
    cout << endl;
    cout << "Sorted array: ";
    printArray(sortedArray,size);
    cout << endl;
    // Deallocate memory
    delete [] sortedArray;
}

Ejemplo de uso:

Conclusion

La ordenación por inserción es un método sencillo y rápido para ordenar elementos en un arreglo. Aunque es eficiente para conjuntos de datos pequeños, puede volverse menos eficaz con conjuntos de datos grandes. Es importante elegir el algoritmo de ordenación adecuado según el tamaño y la naturaleza de los datos a ordenar.

Puedes encontrar el codigo completo en:repositorio

Gif utilizado author Swfung8:gif

Tasky: minimal planner in C++

Paul Contreras — Mon, 19 Feb 2024 21:04:27 +0000

Check my new project, a minimal planner in C++,
Github:
if you had any question comment please!

Introducción a C++: parte 3 Estructuras de control [repetitivas]

Paul Contreras — Sun, 04 Feb 2024 23:46:28 +0000

Repetitivas

De manera simple estas estructuras ejecutan fragmentos de codigo mientras se cumplen ciertas condiciones, existen 3 tipos principales: while, do-while, for.

While

El while se utiliza para ejecutar fragmentos de codigo mientras se cumple la condición es decir si no se cumple no se ejecuta nada, su estructura es:

while (condición){
  // Codigo que se ejecuta mientras se cumple la condición 
}

Ejemplo usando while:

Do-while

El do-while al igual que el while ejecuta el fragmentos de codigo mientras una condición se cumple, la diferencia es que este ejecuta el fragmento al menos una vez, es decir se ejecuta 1 vez y después comprueba si sigue ejecutándose, su estructura es:

do {
 // Codigo que se ejecuta 1 vez y verifica si sigue  ejecutándose 
} while (condición);

Ejemplo usando do-while:

For

El for al igual que el while ejecuta el fragmentos de codigo mientras una condición se cumple. Sin embargo, la diferencia clave radica en su estructura y propósito, el for se usa generalmente se utiliza generalmente para iterar sobre una secuencia específica de elementos, como una lista, una tupla, o un rango numérico, su estructura es:

for (inicialización; condición; incrementación;){
   // Fragmento de codigo 
}

Una manera mas sencilla de verlo es:

for (desde; hasta; con paso de;){
   // Fragmento de codigo 
}

Ejemplo usando for:

Conclusión

Aunque las 3 estructuras sirven para ejecutar fragmentos de codigo mientras una condición se cumple, para determinar que estructura usar, lo mejor es ver el propósito de nuestro programa.

Introducción a C++: parte 2 Estructuras de control [selectivas]

Paul Contreras — Thu, 01 Feb 2024 01:11:35 +0000

En términos simples las estructuras de control son partes de código que según las circunstancias, ejecutan estas declaraciones de cierta manera. Por lo general, hay dos tipos: condicionales y loops.

Condicionales

Estas estructuras permiten que un programa tome desiciones basadas en expresiones lógicas, algunas de estas son If, If - Else If, If - Else, Switch.

If

El if se utiliza para ejecutar un bloque de código si una condición es verdadera, su estructura es:

if (condición){
 // Codigo que se ejecuta si se cumple la condición
}

Si solo hay una condición podemos omitir las llaves:

if (condición)
 // Codigo que se ejecuta si se cumple la condición

Ejemplo usando If:

If - Else If

El Else if permite evaluar múltiples condiciones secuenciales, ejecutando el bloque de código asociado a la primera condición que sea verdadera, su estructura es:

if (condición 1){
 // Codigo que se ejecuta si se cumple la condición 1
} else if (condición 2) {
// Codigo que se ejecuta si se cumple la condición 2
} ...

Ejemplo simple:

If - Else

El else en términos fáciles se ejecuta si ninguna de las condiciones anteriores es verdadera, proporcionando una alternativa, su estructura es:

if (condición){
 // Codigo que se ejecuta si se cumple la condición
} else {
// Codigo que se ejecuta si no se cumple ninguna condición 
} ...

Ejemplo simple:

If-else if- else

Cuando se tienen múltiples condiciones que deben evaluarse de manera secuencial podemos mezclar las tres estructuras anteriores, su estructura es:

if (condición 1){
 // Codigo que se ejecuta si se cumple la condición 1
} else if (condición 2){
// Codigo que se ejecuta si se cumple la condición 2
} else {
// Codigo que se ejecuta si no se cumple ninguna condición
}

Ejemplo simple:

Switch

Es útil cuando se tienen múltiples condiciones y se quiere comparar una variable con varios valores posibles, ejecutando el bloque de código correspondiente al valor que coincida, su estructura es:

// Variable en con la que comparara
int var = 2;

switch(var){
    case 1:
    // Se ejecuta si var es 1
    .....
    // Se agrega break para salir si no se cumple y pasar;
    break;
    case 2:
    // Se ejecuta si var es 2
    .....
    // Se agrega break para salir si no se cumple y pasar;
    break;
    // Si no se cumple ninguna ejecuta esta parte
    default:
    // No se cumplió ningún caso 
}

Ejemplo simple:

Y en esta parte de la sección donde aprenderemos las estructuras de control selectivas , si quieres probar este codigo en linea ingresa a: Compilador de C++ online

Introducción a C++: parte 1

Paul Contreras — Thu, 01 Feb 2024 00:22:52 +0000

C++ fue creado en 1979 por Bjarne Stroustrup como una extensión orientada a objetos de C.

Conceptos básicos

Antes de empezar a programar debemos de conocer los conceptos básicos del c++:
Compilador: En términos simples es el que traduce nuestro código a lenguaje maquina.

Palabras clave: Estas son palabras reservadas por el compilador y no las podemos utilizar como identificadores para variables, funciones u otros elementos en nuestro código, ejemplo: int, float, return, const, void.

Variables y constantes: En términos simples una variable es un espacio en la memoria donde se almacena un valor este puede cambiar durante la ejecución de nuestro codigo, mientras que una constante es una valor que definimos y no puede cambiar.

Tipos de datos: Los tipos de datos determinan el tipo de valor que puede almacenar una variable hay diversos tipos como int (entero), float (real),bool (booleano), char (carácter) por mencionar algunos.

Operadores: Existen principalmente 3 tipos de operadores lógicos: para realizar operaciones lógicas y booleanas, relacionales: estos comparan 2 valores y devuelven un resultado booleano, aritméticos: estos realizan operaciones matemáticas básicas.
Lógicos:

&& (and)
|| (or)
! (not)

Relacionales: ==, !=, <, >, <=, >=

Aritméticos: +, -, *, /, %

Puntuación: La puntuación define la estructura del programa: { } : Define bloques de codigo , ( ) : Define y llama funciones , ; : Se usa para marcar el final de una instrucción.

Comentarios: Los comentarios en la programación son fundamentales para mejorar la legibilidad, mantenibilidad y colaboración en el código fuente en c++ tenemos 2 tipos:

// Para una sola linea de comentario 
/*
Para varias lineas de comentarios 
*/

Entrada y salida: En c++, para imprimir en pantalla usamos la palabra reservada cout y << ejemplo: cout<<"hola mundo"; y para leer datos usamos la palabra reservada cin y >> ejemplo: cin>>variable;

Primer programa: Hola mundo

Como es tradición en el mundo de la programación el primer programa que codificaremos es un hola mundo:

Crea un archivo de c++: holaMundo.cpp

#include <iostream>  // Esta línea incluye el archivo de encabezado de transmisión de entrada/salida, que proporciona funcionalidades para leer y escribir en la consola.

using namespace std;  // Esta línea especifica que el programa utilizará el espacio de nombres estándar de C++, que contiene muchas funciones y objetos estándar.

int main()  // Esta línea declara la función principal, que es el punto de entrada de cada programa en C++.
{
    cout << "Hola, mundo";  // Esta línea utiliza el objeto cout (salida de caracteres) del espacio de nombres std para imprimir la cadena "Hola, mundo" en la consola.

    return 0;  // Esta línea indica que el programa se ha ejecutado correctamente. El valor 0 suele significar una ejecución exitosa.
}

Nuestro codigo quedo algo así:

Al ejecutarlo en nuestra consola observaremos el mensaje:

Y esta fue la primera parte de esta sección donde aprenderemos a programar en c++, si quieres probar este codigo en linea ingresa a: Compilador de C++ online