{"id":119,"date":"2026-06-02T15:43:10","date_gmt":"2026-06-02T15:43:10","guid":{"rendered":"https:\/\/www.yuridek.com\/blog\/?p=119"},"modified":"2026-06-08T21:18:37","modified_gmt":"2026-06-08T21:18:37","slug":"how-i-built-a-web-app-using-codex","status":"publish","type":"post","link":"https:\/\/www.yuridek.com\/blog\/2026\/06\/02\/how-i-built-a-web-app-using-codex\/","title":{"rendered":"How I built a web app using Codex"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n

Versi\u00f3n en Espa\u00f1ol aqu\u00ed<\/a><\/p>\n

In today\u2019s design world, our work has moved beyond the purely aesthetic to become a multidisciplinary field that combines psychology, business strategy and, increasingly, AI-powered programming.\u00a0<\/p>\n\n

Recently, I faced a challenge with one of my clients, Colegio San Jorge de Arica, which led me to cross that boundary: from being a user of tools to becoming the creator of one.<\/p>\n\n

The Challenge: Performance<\/strong><\/p>\n\n

My work with my client isn\u2019t just about \u201credesigning a website\u201d. The aim is to transform their platform into a tool that reflects their identity: a blend of innovation and tradition. By professionalising their corporate image, we\u2019re not just seeking visual impact, but also aiming to meet clear business objectives, such as increasing interest in enrolments.<\/p>\n\n

However, aesthetics (the Aesthetic-Usability Effect<\/a> suggests that beauty is perceived as more usable) are of no use if the platform is slow. This is where theory meets technical reality: the Doherty Threshold<\/a> tells us that productivity and satisfaction skyrocket when the system response time is under 400ms. In the context of a school, where parents are looking for information quickly, every millisecond counts; this is why it is so important to focus on image optimisation, and all the more so for this project, given that 68% of users access it via mobile phones.<\/p>\n\n

The Image Problem and the AVIF Solution<\/strong><\/p>\n\n

Images are the lifeblood of a school\u2019s website, but they are also its biggest drag on loading speed. This is where the AVIF format comes in. It is currently the king of compression: it offers an impressive reduction in file size without any noticeable loss of visual quality.<\/p>\n\n

Although Elementor offers an AVIF optimisation tool<\/a>, it does so via an additional paid service. So, NOT wanting to pay for this service was what motivated me to create my own AVIF image optimiser.\u00a0<\/p>\n\n

At first, we tried to solve this directly within a WordPress plugin. The plugin could take images uploaded to the media library and generate optimised versions. However, a major problem arose: image conversion relies heavily on the resources and capabilities of the server hosting WordPress.<\/p>\n\n

On shared hosting, such as that typically used for WordPress sites, there isn\u2019t always full support for AVIF, WebP, Imagick, GD or modern compression libraries. Furthermore, converting large images consumes CPU, memory and processing time. This can lead to errors when uploading images, queued processes, timeouts or a poor user experience.<\/p>\n\n

That\u2019s why I decided to split the problem into two parts:<\/p>\n\n

    \n
  1. Create an external web app dedicated exclusively to optimising images.<\/li>\n\n
  2. A WordPress plugin that communicates with my web app and uses the optimised result within WordPress.<\/li>\n<\/ol>\n\n

    Creating my own web app<\/strong><\/p>\n\n

    Up until now, my workflow for optimising images has been manual. I would crop my image and then drag it onto https:\/\/squoosh.app<\/a>, a brilliant web app that compresses images into AVIF format, leaving them weighing practically nothing whilst still looking great. So, once I had the resulting AVIF image, I\u2019d manually upload it to WordPress, which took up valuable time.<\/p>\n\n

    As this web app works so well, what I did was use Codex<\/a> to create an app inspired by Squoosh, but called Squishy (a name inspired by the jellyfish from Finding Nemo \u2013 delicate, yet powerful \ud83e\udebc\ud83d\ude02).<\/p>\n\n

    I now had my own web app for optimising images, at a fraction of the price Elementor would charge me for its image optimisation service. If you\u2019d like to try it out, you can do so here: https:\/\/squishy.yuridek.com\/<\/a><\/p>\n\n

    The next task would be to create a WordPress plugin that uses my app, compresses the image \u2018externally\u2019, and then uses the result in WordPress.<\/p>\n\n

    \u2014 Continued in part two<\/a><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\n

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\n

    Como cre\u00e9 una web app con Codex<\/b><\/h1>\n

    En el mundo del dise\u00f1o actual, nuestra labor ha dejado de ser meramente est\u00e9tica para convertirse en una disciplina multidisciplinaria que combina psicolog\u00eda, estrategia de negocios y, cada vez m\u00e1s, programaci\u00f3n potenciada por IA.<\/p>\n

    Recientemente, me enfrent\u00e9 a un desaf\u00edo con uno de mis clientes, el Colegio San Jorge de Arica, que me llev\u00f3 a cruzar esa frontera: de ser un usuario de herramientas a convertirme en el creador de una.<\/p>\n\n

    El Desaf\u00edo: Rendimiento<\/b><\/h2>\n\n

    Mi trabajo con mi cliente no es solo \u201cre-dise\u00f1ar una web”. El objetivo es transformar su plataforma en una herramienta que refleje su identidad: una mezcla de innovaci\u00f3n y tradici\u00f3n. Al profesionalizar su imagen corporativa, no solo buscamos un impacto visual, sino cumplir objetivos de negocio claros, como aumentar el inter\u00e9s en las matr\u00edculas.<\/p>\n

    Sin embargo, la est\u00e9tica (el Aesthetic-Usability Effect<\/a> sugiere que lo bello se percibe como m\u00e1s usable) no sirve de nada si la plataforma es lenta. Aqu\u00ed es donde la teor\u00eda se encuentra con la realidad t\u00e9cnica: el Doherty Threshold<\/a> nos dice que la productividad y la satisfacci\u00f3n se disparan cuando la respuesta del sistema es de menos de 400ms. En el contexto de un colegio, donde los padres buscan informaci\u00f3n r\u00e1pida, cada milisegundo cuenta, es por esto que es tan relevante preocuparse de la optimizaci\u00f3n de im\u00e1genes, y con mayor raz\u00f3n este proyecto que el 68% de los usuarios llegan a trav\u00e9s de celulares.<\/p>\n\n

    El Problema de las Im\u00e1genes y la Soluci\u00f3n AVIF<\/b><\/h2>\n\n

    Las im\u00e1genes son el alma de la web de un colegio, pero tambi\u00e9n su mayor lastre de velocidad. Aqu\u00ed entra el formato AVIF. Es, actualmente, el rey de la compresi\u00f3n: ofrece una reducci\u00f3n de peso impresionante sin perder calidad visual perceptible.<\/p>\n

    Aunque Elementor ofrece un compresor de optimizaci\u00f3n AVIF<\/a>, lo hace a trav\u00e9s de un servicio de pago adicional. Entonces, el NO querer pagar este servicio fue lo que me motiv\u00f3 a crear mi propio optimizador de im\u00e1genes a AVIF<\/b>.<\/p>\n

    Al comienzo intentamos resolverlo directamente dentro de un plugin de WordPress. El plugin pod\u00eda tomar im\u00e1genes subidas a la biblioteca de medios y generar versiones optimizadas. Sin embargo, apareci\u00f3 un problema importante: la conversi\u00f3n de im\u00e1genes depende mucho de los recursos y capacidades del servidor donde est\u00e1 alojado WordPress.<\/p>\n

    En un hosting compartido, como el\u00a0 <\/span>que suele usarse para sitios WordPress, no siempre hay soporte completo para AVIF, WebP, Imagick, GD o librer\u00edas modernas de compresi\u00f3n. Adem\u00e1s, convertir im\u00e1genes grandes consume CPU, memoria y tiempo de ejecuci\u00f3n. Eso puede provocar errores al subir im\u00e1genes, procesos que quedan en cola, timeouts o una mala experiencia para el usuario.<\/p>\n

    Por eso decid\u00ed separar el problema en dos partes:<\/p>\n

      \n
    1. Crear una web app externa encargada exclusivamente de optimizar im\u00e1genes.<\/li>\n
    2. Un plugin de WordPress que se comunica con mi web app y usa el resultado optimizado dentro de WordPress.<\/li>\n<\/ol>\n
        <\/ol>\n\n

        La creaci\u00f3n de mi propia web app<\/strong><\/h2>\n\n

        Mi flujo de trabajo para optimizar im\u00e1genes hasta ahora era manual. Recortaba mi imagen y luego la arrastraba a\u00a0 <\/span>https:\/\/squoosh.app<\/a>, una web app que es maravillosa ya que te comprime las im\u00e1genes en formato AVIF y quedan pesando pr\u00e1cticamente nada y se siguen viendo muy bien. Asi que una vez que ten\u00eda la imagen AVIF resultante la sub\u00eda manualmente a WordPress, lo cual me consum\u00eda tiempo valioso.<\/p>\n

        Como esta web app funciona tan bien, lo que hice fue crear con Codex<\/a> una app inspirada en Squoosh, pero llamada\u00a0Squishy<\/b> (nombre inspirado en la agua viva de buscando a Nemo, chica, pero poderosa \ud83e\udebc\ud83d\ude02).<\/p>\n

        Ya ten\u00eda mi propia web app para optimizar im\u00e1genes y a una fracci\u00f3n de precio de lo que Elementor me cobrar\u00eda por tener su servicio de optimizaci\u00f3n de im\u00e1genes. Si quien pueden probarla aqu\u00ed:

        https:\/\/squishy.yuridek.com\/<\/a><\/p>\n

        Ahora la tarea ser\u00eda crear un plugin para WordPress que utilice mi app, comprima la imagen de forma \u201cexterna\u201d y el resultado utilizarlo en WordPress.<\/p>\n

        \u2014 <\/span>Continua en segunda parte<\/span><\/a><\/p>\n

        \u00a0<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

        What started as a website performance problem became an unexpected leap into AI-assisted development. This post explores how I used Codex to build \u201cSquishy,\u201d my own AVIF image optimisation web app, turning a manual workflow into a faster, scalable solution for WordPress and mobile-first design.<\/p>\n","protected":false},"author":1,"featured_media":120,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"https:\/\/www.yuridek.com\/blog\/wp-content\/uploads\/2026\/06\/How-I-built-a-web-app-using-Codex-Facebook-1.jpg","_seopress_social_fb_img_attachment_id":353,"_seopress_social_fb_img_width":1640,"_seopress_social_fb_img_height":856,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"https:\/\/www.yuridek.com\/blog\/wp-content\/uploads\/2026\/06\/How-I-built-a-web-app-using-Codex-X.jpg","_seopress_social_twitter_img_attachment_id":354,"_seopress_social_twitter_img_width":1200,"_seopress_social_twitter_img_height":630,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/posts\/119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":10,"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/posts\/119\/revisions"}],"predecessor-version":[{"id":513,"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/posts\/119\/revisions\/513"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/media\/120"}],"wp:attachment":[{"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/media?parent=119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/categories?post=119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yuridek.com\/blog\/wp-json\/wp\/v2\/tags?post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}