DEV Community: Eric Luna

Configuring The Ultimate Django/Tailwind Experience (without Node)

Eric Luna — Thu, 03 Mar 2022 21:34:46 +0000

Tailwind is all over the place, it has gained quite a lot of traction in the last years. I was hesitant at first but it eventually grew into me and here we are!

TLDR: If you want to skip this post just clone the final boilerplate here and follow the installation instructions.

Previously, if you wanted to use Tailwind on Django you had to have Node.js and npm installed to use it.

NPM is not common in Django’s ecosystem so installing Tailwind came with a bunch of headaches but those days are gone.

Adam and his amazing team at Tailwind Labs recently released Tailwind’s Standalone CLI, a self-contained executable that you can use just like the regular Tailwind’s CLI but without Node.

Getting Started

Go to your Django’s project directory and grab the executable for your platform from the latest release on GitHub, making sure to give it executable permissions:

# Example for macOS arm64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

On your static/css folder create a file called input.css and add these directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then create a file called output.css. Leave that empty (the CLI will take care of this) and import this asset on your template:

<!-- home.html -->
...
<link rel="stylesheet" type="text/css" href="{% static 'css/output.css' %}">
...

Now let’s create a tailwind.config.js file using the CLI:

./tailwindcss init

That’s the file you will be editing if you want to override or extend the default Tailwind config. You can read more about it here.

The first config setting that we are going to use is content.

We will pass a path to the files that we want to watch for Tailwind classes.

module.exports = {
  content: ["./django_tailwind_boilerplate/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

With the above setup, we are telling the CLI watcher to check every .html and .js file in the project.

⚠️ You should never conditionally construct utility classes. Doing this (’text-${hasError ? ‘red’ : ‘green’}-400) because it will prevent the watcher from picking up the styles.
To fix this example do: {hasError ? ‘text-red-400’ : ‘text-green-400’}.

Now run the CLI watcher:

./tailwindcss -i static/css/input.css -o static/css/output.css --watch

You will notice that output.css now has a Tailwind’s preflight (a CSS reset). This will help you address cross-browser inconsistencies and start a project with a good set of default CSS attributes.

We can add any of Tailwind utility classes to our templates and the watcher will immediately add it to output.css

<!-- home.html -->
...
<body>
  <main class="flex items-center justify-center w-full h-screen">
    <h1 class="text-4xl text-[#51BE95] font-mono">Hello Tailwind</h1>
  </main>
</body>

// output.css
// preflight classes

.static {
  position: static;
}

.flex {
  display: flex;
}

.h-screen {
  height: 100vh;
}

.w-full {
  width: 100%;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-\[\#51BE95\] {
  --tw-text-opacity: 1;
  color: rgb(81 190 149 / var(--tw-text-opacity));
}

⭐Bonus Tip

Django will restart the server on every change on .py files but if you want to see your changes on template files you will need to reload your browser.

To improve that experience, install django-browser-reload. After that, any changes you make on a template will be immediately reflected on your browser. It’s pretty much like having React’s hot module reloading at your disposal!

Get the boilerplate to start your next Django project with Tailwind here. (django-browser-reload included!)

Dark mode con TailwindCSS y NextJS

Eric Luna — Thu, 22 Jul 2021 12:31:15 +0000

Cada día me sorprendo más de la velocidad para escribir CSS que me da TailwindCSS.

Hace un par de semanas implementé el tema oscuro de este sitio y fue una experiencia sin ningún tipo de fricción.

⚙️ Configuración inicial

En la raíz de nuestro proyecto vamos a tener un archivo tailwind.config.js después de haber instalado Tailwiind:

tailwind.config.js

module.exports = {
    ...
  darkMode: 'class'
    ...
}

Lo que hace esto es habilitar el modo oscuro cuando agregamos la clase dark a la etiqueta html de nuestro proyecto.

<html className="dark">
    ....
</html>

Una vez habilitado el tema oscuro vamos a poder agregar el prefijo dark a nuestras clases en Tailwind y de esta manera aplicar esos estilos dependiendo de si está habilitado o no el tema oscuro.

<span className="text-blue-500 dark:text-red-500 text-xl font-mono">Sumate al lado oscuro</span>

👁️ Detectando las preferencias del usuario

Hasta el momento hardcodeamos la clase dark en la etiqueta html. Ahora vamos a ver como podemos cambiarla dinamicamente, permitirle al usuario elegir su tema preferido y persistirlo en memoria para que la próxima vez que entre al sitio se encuentre como lo dejó.

function getInitialColorMode() {
    // Checkeamos si hay guardado algo en localStorage
    // sinó usamos la preferencia del sistema oprativo del usuario
    // Agregamos o removemos la clase según sea necesario
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark')
    } else {
        document.documentElement.classList.remove('dark')
    }
}

function MyApp({ Component, pageProps }) {
    useEffect(() => {
        getInitialColorMode()
    }, [])

    return (
        <Component {...pageProps} />
    )
}

Incializamos nuestra aplicación, ni bien montamos el componente raíz llamamos a getInitialColorMode y getInitialColorMode setea la clase correcta en el HTML.

Hasta ahí todo viene perfecto pero hay un solo problema...

📜 SSR

Cuando navegamos a nuestra página, hacemos una petición al servidor. El servidor nos devuelve el HTML, CSS y JS que nuestro navegador va a usar para visualizar el sitio. El problema es que el servidor no tiene manera de saber la preferencia del usuario ni acceder a los valores en localStorage porque ese código se está ejecutando del lado del cliente.

El flujo es más o menos el siguiente:

El cliente navega a la dirección de nuestro sitio.
El servidor devuelve el HTML, CSS y JS que va a usar el cliente.
El cliente carga el HTML y el CSS.
Renderiza el tema por defecto del sitio.
React se carga y rehidrata la página.
Al correr Javascript nos damos cuenta que el usuario preferia usar el tema oscuro
La página se renderiza otra vez, esta vez con el tema oscuro.

Esto nos deja un hermoso efecto de parpadeo que no queremos en nuestra web.

¿La solución?

Injectar una etiqueta script que vaya antes del contenido principal de nuestro body

🛑 Bloqueando HTML

Para hacer esto en NextJS vamos a tener que sobreescribir _document.js.

Vamos a hacer esto cada vez que necesitemos agregar más logica a las etiquetas html y body de nuestra página.

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
            <script type="text/javascript" src='/checkUserDarkMode.js' />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Este es el _document.js por defecto. Lo único que estamos agregando es el que corre checkUserDarkMode.js. Este script tiene que estar ubicado en la carpeta public de nuestro proyecto y hace lo siguiente:

(function () {
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark')
    } else {
        document.documentElement.classList.remove('dark')
    }
})();

🎣 Custom Hook

Para trabajar con el tema oscuro en nuestra aplicación podemos crear un hook que nos permita cambiar entre los distintos temas.

// useColorScheme.jsx
import { useState } from "react";

const useColorScheme = () => {
  let isDarkInitial = false
  if (typeof window !== 'undefined') {
    isDarkInitial = localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
  }
  const [isDark, setIsDark] = useState(isDarkInitial);

  const toogleTheme = () => {
    setIsDark(dark => {
      !dark
        ? document.documentElement.classList.add('dark')    
        : document.documentElement.classList.remove('dark')

      !dark
        ? localStorage.theme = 'dark'
        : localStorage.theme = 'light'
      return !dark;
    })
  }
  return { isDark, toogleTheme };
}

export default useColorScheme

Con todo esto en su lugar ahora podemos facilmente acceder al tema que está en uso y switchear entre ellos:

import useColorScheme from '../Hooks/useColorScheme'

const { isDark, toogleTheme } = useColorScheme();

const MiComponente = () => {
    return (
        ...
        {isDark ? (
        <MoonIcon onClick={toogleTheme} />
      ) : (
        <SunIcon  onClick={toogleTheme} />
      )}
    )
}

🔗 Links

📖 Custom Document en NextJS
📖 Dark mode de TailwindCSS

Automatizando formularios con Selenium en Python

Eric Luna — Thu, 01 Jul 2021 13:31:40 +0000

Las tareas repetitivas son peor de lo que pensas.

Esa tarea que haces durante 15 minutos todos los días se lleva 91.25 horas de tu año.

Los números son mucho más aterradores si aumentamos esos 15 minutos a 1 hora.

¿Cómo hacemos entonces para automatizar esas tareas triviales y recuperar nuestro tiempo?

Acá es donde entra Python al rescate.

Hoy vamos a ver cómo automatizar la web usando Python y una fantástica libreria para la automatización de navegadores llamada Selenium.

Te voy a guiar paso a paso y vamos a aprender a:

Configurar un entorno de automatización,
Localizar elementos en el navegador
Interactuar con ellos
Y algunos casos extraños que te podes encontrar

⚙️ Configurar un entorno de automatización

Requerimientos:

Tener instalado cualquier version de Python 3.X en nuestra computadora

Driver

Lo primero que vamos a necesitar es un driver.

En este ejemplo vamos a usar chromedriver, el driver para Chrome, pero te podes descargar el driver de cualquier navegador que uses. (Chrome, Firefox)

ℹ️ Asegurate siempre de descargar la versión del driver que soporte la versión del navegador que estás usando

Después vamos a crear la carpeta de nuestro proyecto, crear un entorno virtual e instalar Selenium.



pip install Selenium

Podes ir probando todo lo que vayas aprendiendo en este formulario ficticio que creé para que puedan correr sus scripts sin romper nada en ningún lado 🔨

Para inicializar Selenium tenemos que escribir lo siguiente en nuestro script:



# Importamos webdriver desde selenium
from selenium import webdriver

# Le pasamos la dirección donde descargamos nuestro driver
driver = webdriver.Chrome('/home/eric/drivers/chromedriver')

# Le pasamos la URL del sitio que vamos a automatizar
driver.get('https://ericluna.dev/formTest')

Si ejecutamos el programa ahora, se nos va a abrir una instancia de Chrome y va a navegar automaticamente hacia la URL que le pasamos.

🎯 Localizando elementos

Ahora que tenemos nuestro navegador abierto, vamos a ver como podemos seleccionar elementos del DOM para luego interactuar con ellos.

Hay muchas maneras de hacerlo, la más fácil es buscarlos por id.



# <input id="MI_ID">
driver.select_element_by_id('MI_ID')

Para ver el id de un elemento tenés que abrir la consola de Chrome (Ctrl + Shift + I) y buscar el attributo id en el campo que queremos seleccionar.

Esto no es posible siempre. A veces vamos a querer interactuar con elementos que no tienen un id.

¿Qué hacemos en esos casos?

Bueno, por suerte hay muchas formas de seleccionar un elemento.

find_element_by_id
find_element_by_name
find_element_by_xpath
find_element_by_link_text
find_element_by_partial_link_text
find_element_by_tag_name
find_element_by_class_name
find_element_by_css_selector

Si no queremos andar con vueltas, la que nunca falla es Xpath.

Podés aprendar la sintaxis de cómo escribir un selector con Xpath o simplemente inspeccionar un elemento en Chrome → Click derecho → Copiar → Copiar Xpath.

⚡ Interacciones

Hasta ahora hemos logrado abrir una instancia de Chrome y seleccionar un elemento. Ahora vamos a ver como podemos interactuar con el mismo.

Vamos a poder accedder a distintas acciones dependiendo del elementos que seleccionemos.

Si seleccionamos un input de tipo texto por ejemplo, vamos a poder usar send_keys para pasarle el texto que queremos escribir.



# <input id="nombre" type"text">
input_nombre = driver.select_element_by_id('nombre')
input_nombre.send_keys('Eric Luna')

En el caso de elementos clickeables, vamos a poder usar click para clickearlos pero si estas interactuando con el boton de "Enviar" de un formulario deberías usar submit.

Basicamente, cualquier cosas que podamos hacer manualmente en el navegador, lo podemos hacer automaticamente con Selenium.

Ya sea navegar a distintas URLs, interacturar con ventanas modales, ver las cookies, arrastrar elementos, etc,etc.

⏱️ Tipos De Espera

Cuando cargamos una URL en el navegador de Selenium, es erroneo asumir que todo el contenido va a estar presente. Ya sea que el sitio este usando AJAX o que tu conexión a internet esté más lenta ese día, hay elementos que van a necesitar más tiempo para renderizarse antes de que estén disponibles para que los selecciones.

Por eso es que tenemos que....esperar.

Selenium nos provee dos tipos de espera.

Esperas Implícitas

Según la documentación: "Una espera implícita le dice al WebDriver que pida los cambios al DOM por un tiempo determinado cuando está tratando de encontrar un elemento que no está inmediatamente disponible.



driver.implicitly_wait(10)

input_nombre = driver.select_element_by_id('nombre')

# Va a tirar un error si no encuentra el elemento después de 10 segundos

Esperas Explícitas

Las esperas explícitas esperan a que se cumpla una cierta condición antes de continuar. De esta manera solamente esperamos el tiempo necesario, ni mas ni menos.

Podemos por ejemplo, esperar a que que el elemento sea clickeable en el DOM, o podemos esperar a que el elemento tengo un texto en particular.

Selenium viene con un montón de distintas esperas explícitas que podemos usar:

title_is
title_contains
presence_of_element_located
visibility_of_element_located
visibility_of
presence_of_all_elements_located
text_to_be_present_in_element
text_to_be_present_in_element_value
frame_to_be_available_and_switch_to_it
invisibility_of_element_located
element_to_be_clickable
staleness_of
element_to_be_selected
element_located_to_be_selected
element_selection_state_to_be
element_located_selection_state_to_be
alert_is_present

Pero si ninguna de estas te sirven, podes implementar la tuya facilmente.