DEV Community: Carmen Diaz

The "prose" class: my content best friend

Carmen Diaz — Thu, 11 Jul 2024 19:34:25 +0000

The struggle is real

Let's be honest: if you're a developer who would rather spend more time coding the business logic than designing (like me), you celebrated 🎉 big time when CSS frameworks came into our coding lives. I'm sure you have used some of the general-purpose frameworks such asbootstrap or bulma or the utility-base Tailwind CSS.

I'm very feliz feliz como una lombriz 🐛-- aka very happy with these time-saving frameworks. However, styling long-form content like blog posts, articles, or documentation can be tedious. You need to consider headings, paragraphs, lists, quotes, code blocks – the list goes on, and if you aren't an expert, you can spend a lifetime! I used to spend hours tweaking CSS to make headings look not terrible and paragraphs consistent and readable.

Enter the Hero: The "prose" Class

If you're a fan of Tailwind CSS's utility-first approach, you might have overlooked one of its most powerful plugins: @tailwindcss/typography. Specifically, the plugin's prose class can be a game-changer for making your web content look polished and professional with minimal effort. The "prose" class simplifies your journey by providing a predefined set of styles that adhere to Tailwind CSS's design principles.

Why "prose" Is My New Best Friend

Plays Nice with Markdown::
One of my clients heavily uses Markdown; the plugin's prose class has given its website's content a makeover and made my job much more manageable. If you write in Markdown, prose seamlessly works with the HTML output of your favorite Markdown parser.

Consistent Styling
Say goodbye to the chaos of mismatched fonts and inconsistent formatting; prose creates a unified visual language for your content. By applying the "prose" class to any container element, you instantly inherit a well-crafted typography scale that adjusts font sizes, line heights, margins, and other typographic styles.

It's customizable!
While prose defaults are great! You can easily override styles through Tailwind's config file and tweak colors, fonts, and styles to your heart's content.

It's responsive! prose adapts gracefully to different screen sizes, so your content looks fantastic on mobile phones and desktops.

When to Use prose

Say no more, the prose class is perfect for any Situation Where Readability Matters such as: Blog Posts, Articles and Documentation.

How to Use prose

Install the Plugin: Add @tailwindcss/typography to your project.
Configure (Optional): Tailwind's configuration file lets you customize the prose styles to your liking.
Apply the Class: Simply add the prose class to the container element that wraps your content.

<article class="prose">
  <h1>Feliz Feliz como una lombriz! Blog Post</h1>
  <p>Now 100% visual pleasant!</p>
</article>

For example, you could write a React component to wrap all your <div> or <article> tags.

import clsx from 'clsx';

interface ProseWrapperProps {
    className?: string;
    children: React.ReactNode;
}

function ProseWrapper({ className, children }: React.ComponentPropsWithoutRef<'div'> & ProseWrapperProps) {
    const wrapperClasses = clsx('prose', className);

    return (
        <div className={wrapperClasses}>
            {children}
        </div>
    );
}

export default ProseWrapper;

Adding the class prose to your content's website adjusts font sizes and line heights for easy reading, adds the right amount of spacing between elements, styles headings, lists, blockquote, and code blocks.

There is more! The "prose" class comes in different sizes, like a perfect t-shirt:

prose-sm: For a more intimate, cozy read
prose-lg: When you want your words to stand tall
prose-xl: For making a big impression
prose-2xl: When you need your text to be the star of the show

Wrapping Up
The prose class from @tailwindcss/typography is the secret sauce that'll make your content shine 💫. It's easy to use, powerful, and will make your typography look so good,

Mi primera vez en Google I/O 2024

Carmen Diaz — Sat, 01 Jun 2024 03:49:00 +0000

Recientemente tuve la increíble oportunidad de asistir a Google I/O 2024 por primera vez en persona! Mi hermano, un experimentado Data Scientist, me sugirió compartir mis impresiones clave con su grupo de Data Science en Paraguay.

Google I/O es un conferencia anual organizado por Google conocido por su enfoque a desarrolladores de todo el mundo. Profesionales en tecnología como programadores, científicos e ingenieros asisten a esta conferencia para conocer los avances más recientes que Google ofrece en Android, Chrome, Cloud Platform y una amplia gama de otras herramientas para desarrolladores, así como para hacer networking y aprender de los expertos de la compañía. Durante el evento, se llevan a cabo diversas sesiones, paneles, talleres, laboratorios prácticos y presentaciones magistrales que abarcan las últimas innovaciones de Google en diversas áreas.

¡Google I/O es como Disneylandia para los amantes de la tecnología!
¡Me sentí como un niña de cuatro años queriendo entrar a todos los juegos y comiendo dulces todo el día! ¡Es imposible no querer verlo todo y aprender de todo!

Google I/O 2024: Lo más relevante (desde mi perspectiva)

The Gemini Era

I/O Google's version of the Eras Tour, but with fewer costume changes.
Sundar Pichai

Este año se enfocó en sus avances significativos en IA (Inteligencia Artificial), especialmente, en una serie de novedades en la familia del modelo Gemini - su revolucionario modelo IA- y en la integración de IA en todos sus productos: herramientas para desarrolladores (Google AI Studio, Android studio, etc), Gemini en Google workspace, etc.

🎶🎶Gemini, Gemini, Here And There, Gemini Everywhere 🎶 🎶
Me recuerda al Preschool Rhymes "Bubbles, Bubbles, Here And There" 🎶

Gemini, La nueva familia del modelos de IA de Google

La capacidad del modelo para comprender y generar texto, imágenes y código es impresionante. Para entender el impacto de Gemini, es fundamental comprender dos conceptos: ventana de contexto y multimodal.

Multimodal y multilingüe, significa que puede aprender de datos que van más allá del texto, o sea incluyendo comprensión de imágenes y sonidos en multilenguas. Gemini fue desarrollado multimodal desde sus inicios.

La ventana de contexto se refiere a la cantidad máxima de tokens (palabras o caracteres) que el modelo puede procesar simultáneamente para generar una respuesta. Esta limitación afecta directamente la capacidad del modelo para comprender y generar respuestas. Seria como la memoria a corto plazo de una IA para las conversaciones.

Gemini 1.5 Flash
Entrenado por 1.5 Pro a través de un proceso llamado "destilación". Este modelo es más liviano que el 1.5 Pro, diseñado para ser rápido y eficiente, a un bajo costo. Está optimizado para tareas de gran volumen y es capaz de realizar multimodal con resultadas de alta calidad.

Gemini 1.5 Pro
La clave aqui es:

Además de ampliar su ventana de contexto a 2 millones de tokens, el modelo ha mejorado exponencialmente a través de la optimización de algoritmos y datos: comprensión y análisis de imágenes y audio para videos, generación de código, conversación de múltiples turnos, razonamiento en materias complejas como matemáticas y física, etc han mejorado significativamente en Gemini 1.5 Pro.

Gemini 1.5 Pro and Flash estan disponibles en Google AI Studio y Vertex AI con hasta 1 millón de tokens. Y desarrolladores pueden registrarse a la lista de espera para probar el modelo con 2 millones de tokens.

Gemini Nano
No soy una desarrolladora móvil pero según entendí este modelo se ejecuta directamente en los dispositivos móviles, lo que garantiza una baja latencia y privacidad de datos. Además de las entradas de texto, ahora es posible incluir sonidos e imágenes. Un dato interesante es que también funciona sin red celular.
A partir de Chrome 126, Gemini Nano se integra al desktop client Chrome, habilitando funciones como "Ayúdame a escribir" para generar contenido de formato corto utilizando IA.

La familia Gemma
Gemma, la familia de modelos abiertos creada a partir de la misma investigación y tecnología utilizada para crear los modelos de Gemini, ha integrado dos miembros más al clan. Gemma2, modelo abierto para la innovación responsable en IA y PaliGemma un modelo ligero de lenguaje de visión abierta (VLM) inspirado en PaLI-3,

Proyecto Astra
Google reveló sobre el futuro de los asistentes de IA, un agente será útil en la vida cotidiana. El prototipo mostrado fue abrumador e impresionante al mismo tiempo! Este agente entiende y responde nuestro complejo mundo al igual que nosotros! Necesita comprender y recordar, para responder en tiempo real.

Herramientas de desarrollos, integración de Gemini

Code becomes content, and coders become creators
Jeanine Banks

Google I/O'24 también se centro en su misión de poner Generative AI al alcance de todos los programadores. Hoy, Gemini es accesible para nosotros en:
Android Studio, Chrome DevTools, Project IDX, Colab, VS Code, IntelliJ y Firebase

Sinceramente este tópico merece unos cuantos posts dedicados exclusivamente, asi que los tengo etiquetados como "proximamente" en mi TODO list, una vez que experimente con ellos. Sin embargo, como pincelada, les puedo compartir lo

Mi experiencia profesional se ha enfocado en el desarrollo web en su mayor parte, asi que asistí más bien a todo lo relacionado a Firebase y Google AI Studio

Firebase
Además de improvisar su logo, Firebase nos presentó avances bastante interesantes como Firebase App Hosting

Modelos Generativos en la Media

No puedo terminar este post, sin mencionar los increibles avances hechos en los modelos de generación de media.

Modelo Imagen 3,
Un modelo más fotorrealista con menos imágenes distorcionadas. Lo más increíble es que entiende prompts escritos como las personas lo hacen!, incorporando pequeños detalles.

Music AI tool
Está en mi TODO list probarlo. Me llamó mi atención ya que mi hijo tiende una tendencia hacia la música (canta, baila, inventa músicas, etc) pero mucho no pude ver en persona sobre ello.

Modelo Veo
De acuerdo al demo, Veo crea videos de alta calidad basados en los detalles dados en los prompts en una forma que es bien realista.