In this article, we will simplify the vast world of CSS units by dividing them into two key categories: absolute and relative. As we explore these categories, you'll find an invaluable reference that helps you choose the most suitable unit for a specific design requirement.

"Absolute" Units

Absolute units are fixed and do not change their values. The most commonly used ones are pixels and points. Here's a quick reference table:

Using the conversion values provided in the table, you can easily convert between these units. For example, to convert 12px to centimeters (cm), you can use the following calculation:

$${\color{orange}12}\cancel {px}\times\frac{1\cancel{in}}{{\color{orange}96}\cancel {px}}\times\frac{\color{orange}2.54\color{green}cm}{1\cancel{in}}=12\div96\times2.54=0.3175cm$$

It's worth noting that certain "absolute" units may not be strictly absolute in today's web development context. For instance, if you create a div with a height of "1in" and measure it on the screen(with a simple ruler), you'll find that it's not precisely 1 inch. Despite an interesting historical background, it's unusual today to use any "absolute" units beyond pixels (px).

Additionally, I have created a web project at https://jhordyess.github.io/css-units/ that allows you to convert between these absolute units and provides an option for precise conversions using the diagonal length of a screen.

Relative Units

Relative units, on the other hand, are designed to adapt to their parent. They provide flexibility and responsiveness, making it easier to create websites that adjust to different screen sizes and resolutions.

One commonly used relative unit is the percentage (%). It allows elements to be sized relative to their parent containers.

Another significant relative unit is fr. The flexible unit/fraction is used in conjunction with flex or grid elements.

However, there are 3 main categories of relative units: font-relative units, viewport units, and container query units, let's explore them.

Font-Relative Units

CSS provides several font-relative units that are based on specific font properties. Here's their reference table:

Additionally, you can make these font-relative units relative to the root element of your HTML, here are the units relative to the root element:

Viewport Units

Viewport units are particularly useful when the sizing needs to be relative to the browser size or viewport itself. Here are the available viewport units:

Viewport units have two variants: the small and large viewport units. These are primarily used to support mobile browsers where the visibility of dynamic toolbars can alter the viewport size. Additionally, there exists a dynamic viewport that dynamically changes between the small and large viewport based on the visibility of the dynamic toolbar.

To differentiate between these viewports, you can use the prefixes "s", "l", and "d" as necessary. The prefixes indicate the desired viewport size. Here's a table illustrating the usage:

Container query units

These units are used specifically within container queries. Container queries allow you to apply styles based on the size of an element. They are an alternative to media queries. Similar to viewport units, there are six container query units, corresponding to the viewport units. Here's the list of container query units:

Outro

Finally! We've explored the extensive range of CSS units, from the traditional 'absolute' units to the relative units including font-relative units, viewport units, and container query units.

By using the right unit for each scenario, you can have better control. Feel free to try out different CSS units and let your imagination run wild with your amazing web projects!

Useful Links

• https://www.w3.org/TR/css-values-4/#lengths

• https://developer.mozilla.org/en-US/docs/Web/CSS/length

• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

• https://web.dev/articles/viewport-units

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries

Responsive Web Design Essentials

Responsive web design involves designing web pages that can adapt to different devices such as smartphones, tablets, and desktop computers. By utilizing CSS techniques like flexible layouts, fluid images, and media queries, web developers can customize the content and design based on the user's device and screen size.

Understanding Resolutions and Pixel Ratios

When purchasing a new phone, it's common to consider the display resolution before purchasing but this resolution is different from the resolution that we use for designing and developing webpages.

There are two types of resolutions in the context of display resolutions and web design, physical resolution, and logical resolution.

• Physical resolution (also known as native resolution or device resolution) refers to the number of pixels on the display, representing the hardware capability. For instance, the Samsung Galaxy S23+ has a physical resolution of 1080x2340 pixels.

• Logical resolution (also known as CSS resolution, viewport, or effective resolution) indicates the resolution used by the operating system or graphics driver to render on the screen. It is usually lower than the physical resolution. For the Samsung Galaxy S23+, the logical resolution is 360x780 pixels.

Calculating the logical resolution for a device involves using the pixel ratio (scale factor or density display). We can determine the logical resolution by dividing the physical resolution by the pixel ratio.

For the Samsung Galaxy S23+ with a pixel ratio of 3, the width of 1080 pixels becomes 360 pixels, and the height of 2340 pixels becomes 780 pixels. So, as you can see, the logical resolution can be calculated, only using the pixel ratio.

Finding phone resolutions and pixel ratios

While some phone and display brands may not provide the pixel ratio, I have prepared three methods to obtain this information:

Using the phone itself

Visit the website www.mydevice.io from the desired phone to view the pixel ratio, viewport, and other valuable data. Notice that the viewport term is most commonly used when referring to the logical resolution.

Searching online

Utilize search engines to find websites that list devices alongside their viewports. For instance "Samsung Galaxy S23+ viewport". I regularly use: https://yesviz.com/mobiles.php and https://viewportsizer.com/devices/

Self-calculation

In cases where you don't have access to precise device information, you can still make estimations with the display's PPI(pixels per inch) A helpful tool can be found at jhordyess.github.io/viewport-calculator simply input the device resolution and its PPI to get your calculations.

Another approach is to divide the PPI by 150, as Boris Smus recommends in his article on web.dev/high-dpi/. For instance, if you have a device with 350 PPI, this method will give you a pixel ratio of 2.3.

$${350\over150} = 2.\overline{3}$$

Browser Dev Tools Overview

Web browsers like Firefox and Chrome offer powerful developer tools that simplify the design and testing of websites. These built-in tools allow developers to inspect and manipulate HTML, CSS, and JavaScript code in real-time, facilitating the optimization process. One of these features is device emulation.

To initiate device emulation in Firefox:

1. Open the webpage you want to test.

2. Press F12 to open the dev tools panel.

3. Click the "Responsive Design Mode" button.

Now we have access to other useful features for responsive design, for example: device selector, internet throttling, or taking screenshots.

Adding Custom Devices in Firefox

Firefox's developer tools provide a method for adding custom devices to emulate specific mobile phones. By following these steps:

1. From the previous steps, click the device selector button, followed by the "Edit list" option at the end of the drop-down menu, and a new panel called "Device Settings" will open.

2. 

   From here, you can add custom devices by clicking the "Add Custom Device" button. Input the relevant data, such as the device name, size, or pixel ratio. Here is an example for Samsung A30 based on: https://yesviz.com/devices/samsung-a30/

   

   ☝

   An empty user agent string might suffice for design purposes, but in certain situations, it could become a necessity 🤔.

3. Finally, saving the new device will allow you to select it from the device selector.

Furthermore, you can choose whether to display or conceal default devices, and you also can modify or remove custom devices to suit your specific needs within the "Device Settings" section.

Outro

In this tutorial, we covered how to add custom devices in Firefox and explored the concepts of physical and logical resolutions, as well as pixel ratios.

By using the browser's dedicated developer tools, web designers can effectively test and optimize their websites for an optimal user experience across various screen sizes.

Useful Extra Links:

• https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/

• https://cloudinary.com/glossary/device-pixel-ratio

• https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

• https://yesviz.com/article.php

Updated on: March 2025

In this tutorial, I will guide you through the process of creating a Vite project that leverages the power of Sass for efficient and streamlined styling. Vite is a fast-build tool designed to enhance development speed, while Sass is a CSS preprocessor that offers a range of powerful features. By integrating Sass into your Vite project, you can optimize your CSS workflow and boost your productivity.

Prerequisites

Before we begin, ensure that the following are installed on your system:

• Node.js (along with either yarn or npm)

• Visual Studio Code (optional)

• A shell (also known as a command line interface), such as Bash or PowerShell.

What is Vite

Vite is a versatile package build tool that offers multiple templates for different frameworks and programming languages. The templates available include Vanilla, Vue.js, React, Preact, Lit, Svelte, Solid, and Qwik with JavaScript or TypeScript.

Step 1: Initialize a Vite Project

Assistant way

Open your command line interface and run the following command:

# With yarn
yarn create vite

# With npm
npm create vite@latest

Follow the assistant's prompts and provide the project name, select the Vanilla framework, and choose the JavaScript variant.

Rapid way

To create a project swiftly, run the following command:

yarn create vite sass-app --template vanilla

# With npm from 7+
npm create vite@latest sass-app -- --template vanilla

Step 2: Open the Project

Navigate to your project directory using the command line:

cd sass-app

You can also open the project directly in VSCode with the following command:

code sass-app

Step 3: Install Dependencies and Run

So when you view the project, you can advise the following project structure:

sass-app/
├── public/
│   ├── vite.svg
├── src/
│   ├── counter.js
│   ├── javascript.svg
│   ├── main.js
│   ├── style.css
├── .gitignore
├── index.html
├── package.json

Now install the necessary dependencies by running:

yarn install

# With npm
npm i

After installing the dependencies, start the project and view it in your browser with the command:

yarn dev

# With npm
npm run dev

For the next steps, we need to remove unnecessary files from the template. Delete the files marked with "❌" and empty the files marked with "🔄".

sass-app/
├── public/
│   ├── vite.svg ❌
├── src/
│   ├── counter.js ❌
│   ├── javascript.svg ❌
│   ├── main.js 🔄
│   ├── style.css
├── .gitignore
├── index.html 🔄
├── package.json

Use the following bash command:

rm public/vite.svg src/counter.js src/javascript.svg \
  && echo "" > index.html && echo "" > src/main.js

Step 4: Configure Sass

Vite supports CSS preprocessors like Sass. Begin by installing Sass as a project developer dependency:

yarn add sass -D

# With npm
npm i sass -D

Next, you have two options:

• Change the file extension of style.css to style.scss (or style.sass) and remove all its contents.

• Delete the style.css file and create a new file named style.scss (or style.sass).

You can execute the following bash commands for either option:

# First option
mv src/style.css src/style.scss && echo "" > src/style.scss

# Second option
rm src/style.css && touch src/style.scss

Step 5: Add Sass rules

Inside src/style.scss, create the Sass rules according to your requirements. For example:

// src/style.scss

@use "sass:color";

$primary-color: #aa866a;
$secondary-color: #40646c;
$text-color: #fff;

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: color.scale($primary-color, $lightness: 20%);

  h1 {
    color: $secondary-color;
  }

  p {
    color: $text-color;
  }
}

In index.html, create the HTML structure for your project. For example:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sass Project</title>
    <script type="module" src="main.js" defer></script>
  </head>
  <body>
    <main class="container">
      <h1>Hello, Sass!</h1>
      <p>This is a simple example of using Sass with HTML.</p>
    </main>
  </body>
</html>

In src/main.js, import the style.scss file to include your Sass code:

// src/main.js

import './style.scss'

Run Your Vite Project

Now that your project is set up with Sass, use the following command to run it:

yarn dev

# With npm
npm run dev

Outro

Congratulations! You have successfully created a Vite project with Sass integration. By combining the speed and efficiency of Vite with the powerful features of Sass, you can enhance your CSS workflow and build stunning web applications. Feel free to explore more of Vite's capabilities and experiment with your Sass styles.

Bonus ⭐

The code is now available on GitHub as a template repository. You can clone it and use it as a starting point for your projects. Check it out here.

Useful Extra Links:

• https://vitejs.dev

• https://sass-lang.com

Siendo Raspberry Pi una computadora, podemos utilizarlo como un servidor y acceder de forma remota a través del protocolo SSH. También podemos programarlo usando Visual Studio Code.

En este post, explicaré cómo configurar un PC con Ubuntu y VSCode, conectado a través de una red Wi-Fi, para autenticarnos en un Raspberry Pi y programarlo de forma remota utilizando el protocolo SSH.

¿Qué es SSH (Secure Shell)?

• SSH es el nombre de un protocolo y el programa que lo implementa.

• Permite iniciar sesión de forma segura y remota a través de una red.

• Principalmente usado en servidores para una administración remota.

• Pertenece a la capa de aplicación de los modelos OSI y TCP/IP.

• De forma estándar usa el puerto 22.

• Considerado el reemplazo de Telnet.

Funcionamiento de llaves públicas y privadas

Configurar RPi

Para configurar el Raspberry Pi, primero debemos habilitar el servidor SSH. Luego, crearemos un nuevo usuario con su respectiva contraseña y lo añadiremos a los grupos gpio y sudo.

Antes de comenzar la configuración, es importante asegurarse de tener una contraseña segura para el usuario predeterminado del Raspberry Pi. Esto se puede hacer a través de Inicio > Preferencias > Configuración de Raspberry Pi > Sistema > Cambiar clave.

Habilitar SSH

Existen dos formas comunes de habilitar SSH en el Raspberry Pi: mediante el asistente de configuración o mediante la consola.

Mediante asistente de configuración

Inicio > Preferencias > Configuración de Raspberry Pi > Interfaces > SSH.

Mediante consola

sudo raspi-config

Luego, seleccionar Interface Options ⏎ SSH ⏎ <Yes> ⏎

Configurar nuevo usuario

A continuación, crearemos un nuevo usuario con su respectiva contraseña y lo añadiremos a los grupos gpio y sudo.

Crear usuario

sudo adduser juan-remoto

Observaciones:

• Se solicitará la contraseña de superusuario.

• Luego, se pedirá crear una contraseña para el nuevo usuario.

• También se solicitará información adicional del usuario, como el nombre completo o el número de habitación🤷. Esta información puede dejarse en blanco presionando "enter".

• Finalmente, se confirmará la información ingresada escribiendo "Y" y presionando "enter".

Añadir a grupos

sudo usermod -aG gpio,sudo juan-remoto

Observaciones:

• El usuario será agregado al grupo gpio para acceder a los pines de forma remota.

• El usuario también será agregado al grupo sudo para ejecutar comandos con permisos de superusuario.

¿Cuál es mi IP?

Para conectarse de forma remota, es necesario conocer la IP del Raspberry Pi. Esto podemos hacerlo con el siguiente comando:

hostname -I

Observaciones:

• En una red de área local (red doméstica), la IP podría comenzar con 192.168.x.x.

• Es importante recordar esta IP, ya que será necesaria más adelante.

Configurar PC

En primer lugar, es necesario generar un par de llaves pública y privada, y añadir la llave pública al SSH Agent. Luego, copiar la llave pública en el Raspberry Pi.

Generar par de llaves SSH

ssh-keygen -t ed25519 -f ~/.ssh/rpi

Observaciones:

• Usamos el algoritmo Ed25519, el más recomendado en la actualidad.

• El par de llaves se llamará rpi y se ubicará en ~/.ssh.

• El nombre puede ser modificado según sea necesario, pero en este ejemplo se utilizó rpi para identificarlo fácilmente.

• Es recomendado crear una passphrase, las mejores contraseñas tienen 20 caracteres entre letras mayúsculas, minúsculas, números, y al menos un caracter especial.

Añadir la llave privada a SSH Agent

ssh-add ~/.ssh/rpi

Observaciones:

• Debemos respetar la dirección y el nombre con donde se generaron las llaves.

• Si estableciste una passphrase se solicitará introducirla.

Copiar la llave pública a RPi

ssh-copy-id -i ~/.ssh/rpi.pub juan-remoto@192.168.x.x

Observaciones:

• Se indica la ruta de la llave pública, entre el par de llaves creados es el que tiene la extension pub.

• También se indica el usuario, en este caso juan-remoto.

• La IP debe ser reemplazada por la IP del Raspberry Pi.

• Se solicitará la contraseña del usuario juan-remoto que fue creado anteriormente.

Configurar VS Code

Visual Studio Code es un editor de código libre que facilita la programación en varios lenguajes. En esta ocasión, lo configuraremos para programar y controlar el GPIO de un Raspberry Pi de forma remota utilizando el protocolo SSH.

Instalar la extensión Remote - SSH

code --install-extension ms-vscode-remote.remote-ssh

Configurar la conexion SSH

Ahora crearemos el archivo de configuración utilizando cualquier editor de texto, como "nano" o "vim". En este ejemplo, utilizaremos "gedit":

gedit ~/.ssh/config

Dentro del archivo, agregaremos la siguiente configuración, reemplazando la IP y el nombre de usuario:

Host rpi-remoto
  HostName 192.168.x.x
  User juan-remoto

Guardar y cerrar el archivo.

Acceso desde VS Code

Abre VS Code y accede al Raspberry Pi.

Si se estableció una passphrase al generar las llaves, será necesario introducirla.

Espera hasta que se establezca la conexión y luego puedes probar ejecutando algún comando, por ejemplo:

pinout

Obteniendo por ejemplo:

Outro

En este post, aprendimos cómo utilizar el protocolo SSH para acceder de forma remota a un Raspberry Pi utilizando Visual Studio Code.

• Primero, habilitamos el servicio SSH en el Raspberry Pi y creamos un nuevo usuario con los permisos necesarios.

• Después, generamos un par de llaves SSH y copiamos la llave pública en el Raspberry Pi para establecer una conexión segura.

• Finalmente, configuramos Visual Studio Code para conectarnos al Raspberry Pi y utilizarlo de forma remota.

  

De esta manera, podemos programar un Raspberry Pi de forma remota para proyectos avanzados y ambiciosos. Además, con el protocolo SSH, podemos acceder de forma segura desde cualquier parte del mundo.

Espero que este post haya sido útil y que te haya ayudado a empezar a trabajar con la Raspberry Pi y Visual Studio Code.

Enlaces

https://code.visualstudio.com/docs/remote/ssh

https://www.raspberrypi.com/documentation/computers/remote-access.html

https://www.ssh.com/academy/ssh/keygen

https://es.wikipedia.org/wiki/Secure_Shell