Forem: Norberto Krucheski

Empecé a programar a las 9 de la noche. Eran las 4 de la mañana y no quería parar.

Norberto Krucheski — Tue, 07 Apr 2026 18:34:53 +0000

Son las 11 de la noche. Abrí el editor con la idea de resolver una cosa puntual, una sola. Dos horas después sigo acá, el proyecto avanzó más que en toda la semana anterior, y lo último que quiero hacer es cerrar la computadora.

No es que no tenga sueño. Es que parar se siente mal.

No es tirar prompts al azar

Quiero aclarar algo antes de seguir, porque si no, esto puede sonar a la historia de cualquiera que descubrió ChatGPT y se emocionó.

Trabajo en la industria hace más de 15 años. Cuando arranco un proyecto, no abro el chat y empiezo a pedir código. Primero pienso el producto. Armo un PRD con el detalle necesario: qué problema resuelve, quién lo usa, qué no entra en scope. Después pienso la arquitectura. Qué stack, por qué, cómo se comunican las partes. Si hay una API involucrada, escribo la documentación técnica antes de tocar una sola línea.

Recién ahí, con todo eso claro, empiezo a iterar con la IA.

Y esa diferencia lo cambia todo. Cuando sabés exactamente lo que querés, cuando el contexto está bien armado y el prompt refleja eso, la IA no alucina. No te devuelve algo genérico que tenés que reescribir. Te devuelve exactamente lo que necesitás, en el stack que elegiste, con la arquitectura que definiste.

Eso es lo que no se dice mucho: la IA no reemplaza el pensamiento. Lo amplifica. Si llegás con las ideas claras, el resultado es bueno. Si llegás sin saber qué querés, el resultado es ruido.

El loop que no ves venir

El problema no es que la IA funcione mal. El problema es que funciona muy bien.

Un proyecto que antes me llevaba una semana, hoy lo resuelvo en un día. Funcional, escalable, con el código que yo hubiera escrito si tuviera el tiempo. Eso genera una descarga parecida a la dopamina: cada feature que cierra, cada endpoint que responde, cada componente que aparece en pantalla exactamente como lo imaginaste. El momentum es real y es adictivo.

Y cuando algo tiene tanto momentum, parar se siente como perder.

Empezás a estirar la sesión. "Una cosa más y cierro." Esa cosa lleva a otra. Y esa otra lleva a otra. No porque estés bloqueado, sino porque todo fluye. Es la versión tech del binge — no parás porque el siguiente episodio arranca solo.

Lo que no notás en ese momento es que estás en un estado alterado de productividad. El cerebro en modo flow, alimentado por resultados rápidos y constantes. No es una sensación mala. Es exactamente eso lo que lo hace difícil de cortar.

El momento en que me di cuenta

No fue un momento dramático. No rompí nada, no perdí trabajo.

El patrón era siempre el mismo. Me sentaba a la noche a avanzar un poco. El proyecto estaba en un 70%, ese 70% lo había hecho en un día o dos, y en mi cabeza solo quedaba un 30% — algo que calculaba en una o dos horas. Fácil. Rápido. "Termino esto y me acuesto."

Eran las 9 de la noche. Cuando levanté la vista del monitor eran las 4 de la mañana.

No porque algo hubiera salido mal. Al contrario: todo fluía, cada iteración cerraba bien, y ese 30% que quedaba siempre tenía un poco más para refinar, para mejorar, para dejar bien. El proyecto estaba avanzando perfecto — y eso era exactamente el problema. Cuando las cosas van bien no hay señal de parada. El cerebro no tiene motivo para frenar.

Me di cuenta de que no era cansancio lo que me hacía cerrar la computadora. Era el horario, o que alguien me escribía, o que físicamente ya no podía más. Nunca era una decisión.

Lo que aprendí

La IA no te vuelve adicto porque sea fácil. Te vuelve adicto porque, si sabés usarla, es genuinamente poderosa. Y eso es más peligroso que si fuera una herramienta mediocre.

Lo primero que cambié fue dejar de programar de noche por defecto. No siempre se puede, pero cuando tengo la opción, lo evito. La noche y el momentum son una combinación difícil de cortar.

Y cuando sí me siento a la noche, entro con dos cosas claras: una hora de corte y una meta específica. No "voy a avanzar un poco" — eso no existe. Algo concreto: estas dos features, este módulo, este endpoint. Cuando lo terminé, cierro. Sin negociar.

Parece simple. Y lo es. Pero la diferencia entre "voy a avanzar un poco" y "voy a terminar estas dos cosas y cierro" es la diferencia entre las 11 de la noche y las 4 de la mañana.

El proyecto va a seguir mañana. Siempre sigue.

¿Te pasó algo parecido? Me interesa saber si el patrón es el mismo cuando el contexto y el nivel de experiencia cambian.

Hice una app de escritorio para procesar imágenes — sin nube, sin cuenta, todo local

Norberto Krucheski — Thu, 26 Feb 2026 18:11:39 +0000

Cada vez que necesitaba convertir una imagen a WebP, redimensionar o sacarle los metadatos EXIF, terminaba en alguna página random que te pide subir el archivo a un servidor. Tus fotos viajando a quién sabe dónde, para una operación que cualquier computadora moderna puede hacer en milisegundos.

Me cansé de eso y armé Pixora: una app de escritorio, open source, que procesa imágenes 100% en tu máquina. Sin internet, sin cuenta, sin nube.

NorbertOSK / pixora

Pixora

Local-first image processing. No cloud. No account.

🇺🇸 English | 🇪🇸 Español | 🇧🇷 Português

Pixora is a free, open-source desktop app for image processing. Convert formats, resize, remove backgrounds with AI, and strip metadata — all 100% locally on your machine, with no internet required after setup.

app.mp4

Built by Norberto Krucheski.

Download

Installers are automatically built for every release via GitHub Actions.

Platform	Download
Windows	⬇ Download for Windows (.exe)
macOS (Apple Silicon M1 or higher)	⬇ Download for macOS (.dmg)
Linux	⬇ Download for Linux (.AppImage / .deb)

Just download, install, and run — no account, no setup, no cloud.

Features

Feature	Details
Format Conversion	Convert between WebP, JPEG, and PNG
Quality Control	Adjustable quality slider (1–100%)
Smart Resize	10 built-in presets (hero, blog, avatar, 4K…) + custom dimensions. Aspect ratio always preserved.
EXIF & Metadata	View full metadata (camera, GPS, date, exposure…) and strip

…

View on GitHub

Qué hace

Conversión de formato — WebP, JPEG, PNG, con un slider de calidad
Redimensionar — 10 presets (hero, blog, avatar, 4K) o dimensiones custom. Siempre preserva el aspect ratio
Ver y eliminar metadatos EXIF — cámara, GPS, fecha, todo
Remover fondo con IA — modelo ONNX local, sin API key, funciona offline
Procesamiento masivo — arrastrás un montón de imágenes y las procesa en paralelo. Exportás todo como ZIP
Vista antes/después — slider interactivo para comparar el resultado

Todo esto funciona sin conexión a internet (después de la primera descarga del modelo de IA).

Por qué Tauri 2 + Rust en vez de Electron

Electron es genial para muchas cosas, pero para procesar imágenes necesitaba velocidad real. No "velocidad aceptable", sino que un batch de 8 fotos pesadas no trabe la interfaz.

Tauri 2 me dejó combinar lo mejor de dos mundos:

El frontend es React 18 con TypeScript. Toda la UI, los paneles, la grilla de imágenes, el slider antes/después. React maneja el estado y los re-renders, pero nunca toca un archivo de imagen directamente.
El backend es Rust puro. Resize con filtro Lanczos3, conversión de formatos, limpieza de EXIF recodificando desde cero, inferencia del modelo ONNX para remover fondos, y creación de ZIPs. Todo compilado a código nativo.

Rust corre a velocidad de C sin garbage collector. Sin pausas, sin demoras random. Las imágenes se procesan en paralelo usando un pool de workers dimensionado a los núcleos del CPU. En un Mac con chip M, procesar 8 imágenes tarda prácticamente lo mismo que procesar 1.

El detalle técnico que más me costó

La comunicación entre React y Rust pasa por un canal IPC que expone Tauri. La primera idea obvia fue: pasar la imagen como base64 por ese canal. Funciona, pero bloquea el thread de JavaScript en cada llamada. Con una imagen grande se nota. Con un batch de 10, la UI se congela.

La solución fue cambiar el enfoque: todo el procesamiento corre en Rust, y al frontend solo le devuelvo la ruta de un archivo temporal. Menos de 200 bytes viajando por el IPC en vez de megabytes de base64. La interfaz lee ese archivo una sola vez para mostrarlo.

Parece un cambio chico, pero fue lo que hizo que el procesamiento masivo funcione sin que la app se trabe.

Remoción de fondo con IA — offline

Esto es lo que más me gustó implementar. Usa IS-Net, un modelo ONNX cuantizado que pesa ~42 MB. Se descarga la primera vez que lo usás y después funciona completamente offline.

La inferencia corre en ONNX Runtime para Rust (ort crate), directamente en CPU. No necesitás API key, no necesitás GPU, no necesitás nada externo.

El modelo se cachea en:

Sistema	Ubicación
macOS	`~/Library/Application Support/pixora/`
Windows	`%LOCALAPPDATA%\pixora\`
Linux	`~/.local/share/pixora/`

Stack completo

Capa	Tecnología
Desktop	Tauri 2 (Rust + WebView nativo)
Frontend	React 18 + TypeScript
Bundler	Vite 5
Estilos	Tailwind CSS
Estado	Zustand
Imágenes	`image` crate (resize, compress, convert)
Metadatos	`kamadak-exif`
IA	`ort` (ONNX Runtime) + IS-Net
ZIP	`zip` crate

Probalo

Hay instaladores listos para descargar:

Windows — .exe
macOS (Apple Silicon) — .dmg
Linux — .AppImage / .deb

Descargá la última versión acá

O si preferís compilar desde el código fuente:

git clone https://github.com/NorbertOSK/pixora.git
cd pixora
bun install
bun start

La primera vez tarda unos minutos porque compila el backend de Rust. Después arranca rápido.

Privacidad

Tus imágenes nunca salen de tu máquina. No hay servidor, no hay telemetría, no hay analytics. El modelo de IA se descarga una sola vez y listo.

Si te resulta útil, una estrellita en el repo ayuda un montón 😁

NorbertOSK / pixora

Pixora

Local-first image processing. No cloud. No account.

🇺🇸 English |
🇪🇸 Español |
🇧🇷 Português

app.mp4

Built by Norberto Krucheski.

Download

Installers are automatically built for every release via GitHub Actions.

Platform	Download
Windows	⬇ Download for Windows (.exe)
macOS (Apple Silicon M1 or higher)	⬇ Download for macOS (.dmg)
Linux	⬇ Download for Linux (.AppImage / .deb)

Just download, install, and run — no account, no setup, no cloud.

Features

Feature	Details
Format Conversion	Convert between WebP, JPEG, and PNG
Quality Control	Adjustable quality slider (1–100%)
Smart Resize	10 built-in presets (hero, blog, avatar, 4K…) + custom dimensions. Aspect ratio always preserved.
EXIF & Metadata	View full metadata (camera, GPS, date, exposure…) and strip

…

View on GitHub

Mobile First - React Styled-Components - CSS Grid

Norberto Krucheski — Thu, 02 Sep 2021 01:13:49 +0000

A la hora de comenzar un proyecto web, ya sea una app o un sitio, si el mismo debe ser responsive, generalmente puede surgir la pregunta; ¿en que resolución comenzar el proyecto?.

Como su nombre lo indica mobile first «los móviles primero», resume perfectamente esta filosofía de diseño.

Se refiere a un modo de diseñar que tenga en cuenta, en primera instancia, un dispositivo móvil.

A la hora de diseñar, podemos optar por usar frameworks como; Boostrap, Tailwind (el mejor 😁), o hacerlo de forma manual.

En esta guía quiero enseñarte una forma sencilla de encarar el diseño utilizando CSS Grid, Areas y Templates, una vez que definimos la maqueta de nuestro sitio, se puede hacer un diseño responsive de forma muy sencilla.

Queremos lograr una diseño responsive como este:

Para comenzar creamos un proyecto de react y luego instalamos styled-components.

npm create-react-app first-mobile

npm install --save styled-components

Ejecutamos nuestro proyecto:

npm start

Lo primero que vamos hacer es eliminar los archivos que no utilizamos:

App.css
App.test.js
logo.svg
reportWebVitals.js

NOTA: El archivo index.css trae unos estilos por defecto para react, estos los utilizaremos con styled-components y luego borraremos el archivo.

Editamos los archivos index.js y App.js para que no nos de errores, deben de quedar así:

App.js

index.js

Temas que vamos a ver:

React con Styled-Components
CSS Grid + Grid Area

React con Styled-Components

Este módulo nos permite estilizar nuestros componentes, se considera buenas practicas definir a que componente le corresponde que estilo.

Lo mejor de styled-componentes, es que nos permite escribir nuestro CSS de toda la vida, pero también es posible combinarlo con framworks como Tailwind.

Otra ventaja de styled-componentes; es que nos genera clases automáticas, y es imposible que nuestras clases entren en conflicto entre ellas.

Vamos a comenzar con escribir los estilos globales para toda la app (lo que teníamos en index.css).

Para hacerlo de una forma mas ordenada, crearemos dentro de la carpeta src, una carpeta llamada styles.

Creamos un archivo llamado globalStyles.js, importamos createGlobalStyle para crear estilos globales.

Creamos un componente llamado GlobalStyle, donde entre bastics (esa comillas simples invertidas) pegamos el cógido de index.css (luego podemos borrar el index.css).

import {createGlobalStyle} from 'styled-components'

export const GlobalStyle = createGlobalStyle`

//Estilos por defecto que trae React
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Importamos este componente en el nivel mas alto de la app, en nuestro caso en App.js, debe quedar así:

Ahora vamos escribir los componentes para maquetar nuestro sitio y se vea de esta forma:

Pero vamos hacerlo directamente con styled-components.
Dentro de la carpeta styles, creamos otro archivos llamados model.js, (la idea es modelar el sitio).

Importamos styled de styled-componentes, y generamos nuestro primer componente estilizado.

Como se puede ver, se crea un componente (Mayúscula), y de styled utilizamos un div.

Styled = contiene todas las etiquetas HTML.

Vamos a proceder a crear el resto de componentes.

import styled from 'styled-components'

export const Container = styled.div`
width: 90%;
max-width: 1000px;
margin:20px auto;
`

export const Header = styled.header`
background: blue;
color: #fff;
`

export const Main = styled.main`
padding-left: 2%;
`

export const Sidebar = styled.aside`
background: orange;
min-height: 100px;
`

export const Widget = styled.div`

background: orchid;
height: 100px;
`

export const Footer = styled.footer`
padding: 20px;
background: maroon;
color: #fff;`

Ahora vamos a importar nuestros componentes en App.js y le vamos asignar una className adicional que usaremos en un futuro.

import { GlobalStyle } from "./styles/globalStyles";
import { Container, Header, Main, Sidebar, Widget, Footer } from "./styles/model";

function App() {
  return (
    <>
      <GlobalStyle />

      <Container className="contenedor">

        <Header className="header">
          <h1>Header</h1>
        </Header>

        <Main className="contenido">
          <h2>Test</h2>
          <p>Lorem asdasd</p>
        </Main>

        <Sidebar className="sidebar">Sidebar</Sidebar>

        <Widget className="widget-1">Widget-1</Widget>
        <Widget className="widget-2">Widget-2</Widget>

        <Footer className="footer">Footer</Footer>

      </Container>

    </>
  );
}

export default App;

Si vemos nuestro proyecto actual, no tiene mucho estilo que digamos, solo sigue el orden jerarquizo de la etiquetas HTML.

CSS Grid + Grid Area

Para trabajar en Grid, lo que necesitamos es definir una grilla en donde acomodamos nuestro diseño, muchos frameworks usan el sistema de columnas y filas para posicionar objetos en la grilla, nosotros lo haremos de forma manual. 💪

Mi idea no es explicar CSS Grid a fondo 😢 , si no mostrar la magia de Grid Area.

En nuestro ejemplo, nuestro diseño cuenta con 3 columnas, y filas automáticas según el contenido.

Vamos a actualizar el código del componente Container, y automáticamente ya tendremos grid.

export const Container = styled.div`
width: 90%;
max-width: 1000px;
margin:20px auto;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
`

Ya tenemos una grilla, pero aun no un diseño responsive que se adapte a cualquier resolución.

Es aquí donde aparece grid area. Literalmente, nos permite definir con áreas nuestros elementos HTML, a cada componente que creamos, le asignamos un área, debe quedar así:

import styled from 'styled-components'

export const Container = styled.div`
width: 90%;
max-width: 1000px;
margin:20px auto;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
`

export const Header = styled.header`
background: blue;
color: #fff;
grid-area: header; //área

& > h1 {
    margin-left: 2%;
}

`

export const Main = styled.main`
padding-left: 2%;
grid-area: contenido; //área
`

export const Sidebar = styled.aside`
background: orange;
min-height: 100px;
grid-area: sidebar; //área

/*flexbox para acomodar elementos*/

display: flex;
align-items: center;
justify-content: center; //área
`

export const Widget = styled.div`

background: orchid;
height: 100px;
grid-area: ${props => props.className === "widget-1" ? "widget-1" : "widget-2"}; //área

/*flexbox para acomodar elementos*/

display: flex;
align-items: center;
justify-content: center;
`

export const Footer = styled.footer`
padding: 20px;
background: maroon;
color: #fff;
grid-area: footer; //área
`

NOTA: En el componente Widget por medio de props, podemos asignarle un valor condicional (otra ventaja de styled components).

Una vez que ya tenemos las áreas definidas, tenemos que utilizar grid-template-area, para escribir nuestro diseño, esto lo hacemos en el archivo globalStyles.js

Como se puede ver, nuestro tamplate, esta basado en 3 columnas (nuestra grilla), solo debemos asignar nuestros componentes al área que deseamos, siempre respetando las 3 columnas para nuestro ejemplo.

Ahora lo que resta es aplicar los diferenntes templates para las diferentes resoluciones, en nuestro caso, como estamos trabajando con la filosofía mobile-first, creamos las áreas de menor a mayor resolución.

Para esto usamos los media-queries de toda la vida en CSS.
En cada resolución, aplicamos un grid-template-area, y redibujamos nuestro diseño.

import {createGlobalStyle} from 'styled-components'

export const GlobalStyle = createGlobalStyle`

//Estilos por defecto que trae React
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}


//Estilos para Grid Area

/*Grid Area First Mobile*/

/*min 640px*/
.contenedor {
grid-template-areas: "header header header"
                    "contenido contenido contenido"
                    "sidebar sidebar sidebar"
                    "widget-1 widget-1 widget-1"
                    "widget-2 widget-2 widget-2"
                    "footer footer footer"
;
}


/*min 768px*/
@media screen and (min-width: 768px){
.contenedor{
grid-template-areas:    "header header header"
                        "contenido contenido contenido"
                        "sidebar sidebar sidebar"
                        "widget-1 widget-1 widget-2"
                        "footer footer footer"
;
}    
}

/*min 1024px*/
@media screen and (min-width: 1024px){
.contenedor{
grid-template-areas:    "header header header"
                        "contenido contenido sidebar"
                        "widget-1 widget-2 sidebar"
                        "footer footer footer"
;
}

}

/*min 1280px*/
@media screen and (min-width: 1280px){
.contenedor{
grid-template-areas:    "header header header"
                        "contenido contenido sidebar"
                        "widget-1 widget-1 sidebar"
                        "widget-2 widget-2 sidebar"
                        "footer footer footer"
;
}

}

/*min 1536px*/

`

En este caso, solo creamos la estructura de nuestro sitio, pero una vez que rellenamos con nuestro contenido, podemos alinear contenido con flexbox como se muestra en el el ejemplo, en resumen, se puede utilizar el CSS de toda la vida, o combinarlo con otros framworks.

La idea principal es armar una maqueta que sea responsive, luego el contenido de cada área, se debe trabajar por separado, pero si se combina con flexbox, o subgrid, los componentes se puede manipular sin problemas.

Repo: React-StyledComponent-CSS-GridArea

Gracias
Norberto.