• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉN SOY
  • FAQ
  • ACCEDER
  • CONTACTO

Tips & Tricks

7 consejos para programadores autodidactas

Publicado el 19/05/2023 por Ada Leave a Comment

A lo largo de estos años he recibido decenas de correos electrónicos de codelovers que me preguntan por dónde deberían empezar en el mundo de la programación si tienen que hacerlo de manera autodidacta: ni ciclos de formación profesional, ni universidad ni bootcamps.

Y le he dado muchas vueltas para elegir cuáles son los 7 consejos que le daría a todas aquellas personas que quieren intentarlo. ¿En resumen?

  1. Hazte un mapa general del mundo de la programación. Te cuento a qué me refiero.
  2. Elige los recursos más adecuados a tu manera de aprender: texto, vídeos… ¿qué recursos puedes encontrar?
  3. Practica, practica y practica. ¿Cómo hacerlo?
  4. Crea proyectos reales. ¿Es posible programar así sin estar en una empresa?
  5. Lee código de otros programadores. ¿Dónde encontrarlo?
  6. Busca feedback. ¿Es tan fácil que otros me digan cómo programo?
  7. No dejes de aprender. ¿Dónde puedo estar actualizado/a?

¿Quieres entender cada uno de ellos?

En este vídeo para Garage de Ideas trato de plasmar, desde mi experiencia, los siete consejos en detalle:

Filed Under: Tips & Tricks Tagged With: consejos, programación

Qué es la API Fetch de Javascrtip

Publicado el 04/04/2023 por Ada Leave a Comment

Fetch es una API de JavaScript que permite hacer peticiones HTTP para obtener recursos de forma asíncrona desde un servidor. Esta API fue introducida en el estándar de JavaScript en el 2015 y ha ido ganando popularidad en los últimos años hasta el punto de ser el sustituto natural de XML HTTP Request (XHR), del que ya os conté en Didacticode en el curso de Javascript VI.

La API Fetch se puede utilizar para hacer solicitudes de recursos tales como texto, imágenes, archivos JSON, entre otros, y devolverlos como objetos JavaScript que pueden ser utilizados en la aplicación.

Además, es importante tener en cuenta que Fetch utiliza promesas, lo que significa que se puede encadenar varias operaciones, como decodificar una respuesta JSON y actualizar la interfaz de usuario de la aplicación con los datos resultantes. Además, Fetch proporciona soporte para cabeceras personalizadas, autenticación y manejo de errores de manera integrada.

En el siguiente vídeo que desarrollé en colaboración con Garage de Ideas te cuento en 12 minutos qué es la API Fetch y cómo utilizarla con diferentes tipos de archivos:


¡¿A que es sencillo?!

Filed Under: Tips & Tricks Tagged With: api, fetch

¿Qué diferencia hay entre querySelector y querySelectorAll?

Publicado el 04/03/2023 por Ada Leave a Comment

A la hora de seleccionar elementos del DOM, hay muchos modos de hacerlo. Si bien ya hemos hablado de los clásicos getElementById, getElementsByTagName o getElementsByClassName, hay un modo muy sencillo de hacerlo si conocemos los selectores CSS: los métodos querySelector y querySelectorAll.

A continuación, te cuento en detalle la diferencia entre ellos y algunas aplicaciones prácticas.

querySelector

El método querySelector se utiliza para seleccionar el primer elemento del DOM que coincida con un selector CSS.

Por ejemplo, si queremos seleccionar el primer elemento <p> en un documento HTML y almacenarlo en la variable primerParrafo, podemos utilizar el siguiente código:

let primerParrafo = document.querySelector("p");

querySelectorAll

Por otro lado, querySelectorAll se utiliza para seleccionar todos los elementos del DOM que coincidan con un selector CSS.

Por ejemplo, si queremos seleccionar todos los elementos <p> en un documento HTML y almacenarlos en la variable todosLosParrafos, podemos utilizar el siguiente código:

let todosLosParrafos = document.querySelectorAll("p");

En este caso, y a diferencia del ejemplo anterior, si hay varios elementos <p> en el documento, querySelectorAll seleccionará todos ellos.

Es importante destacar que el método querySelectorAll devuelve una colección de elementos, no un solo elemento. Esto significa que, para acceder a los elementos de la colección, es necesario utilizar un bucle “for” o un método similar.

Un ejemplo en el que recorremos todos los párrafos de la página y les modificamos el fondo podría hacerse así:

let todosLosParrafos = document.querySelectorAll("p");
for (let i=0; 0<todosLosParrafos.lenght; i++) {
  todosLosParrafos[i].style.backgroundColor = "yellow";
}

Por tanto, la diferencia fundamental entre ambos métodos es que querySelector devuelve el primer elemento que cumple con el selector indicado entre paréntesis; mientras que querySelectorAll devuelve una colección con todos los elementos que cumplen con el selector.

Aplicación práctica de querySelector y querySelectorAll

Podríamos utilizar querySelector(“h1”) para elegir el primer encabezado de primer nivel de una página que, en general, suele ser único y representa el título de la misma; y podríamos utilizar querySelectorAll(“a”) para elegir todos los enlaces de la página y procesarlos de algún modo: por ejemplo, para quitarles el subrayado.

A pesar de que los ejemplos que te he propuesto solamente hacen referencia a un elemento definido por su etiqueta, podríamos seleccionar elementos de manera tan compleja como quisiéramos utilizando selectores CSS avanzados.

Un ejemplo podría ser el siguiente, en el que seleccionamos todos los elementos párrafo que son descendientes directos de elementos con clase contenido:

let parrafosContenido = document.querySelectorAll(".contenido > p");

Fácil, ¿no? ¿Conocías estos dos métodos? 😉


Filed Under: Tips & Tricks Tagged With: css, javascript

Snippet: pasar un color de hexadecimal a RGB en PHP

Publicado el 12/11/2022 por Ada Leave a Comment

En CSS tenemos muchas posibilidades de trabajar con imágenes sobre las que superponemos colores, degradados, etc. Se conoce como “color overlay”.

Pero hay determinadas propiedades CSS que no admiten colores en hexadecimal y necesitamos pasarlos, sí o sí, en formato RGB, es decir, con las tres componentes en decimal.

Por ejemplo, el color rojo se define como #FF0000 en hexadecimal y en RGB sería (255, 0, 0). Además, muchas de las las reglas CSS que requieren del color en RGB añaden un cuarto parámetro para la transparencia/opacidad, quedando el valor de la siguiente forma: rgb(255, 255, 255, 0.5).

Recientemente he necesitado trabajar con datos dinámicos en el lado del servidor que almacenan un valor de color que posteriormente debo pasar a una hoja de estilos CSS mediante una variable. Eso, quizá, lo dejamos para el próximo artículo.

El caso es que necesitaba una función para pasar de hexadecimal a RGB en PHP que fuera “fácil, sencilla, y para toda la familia”. ¿Se puede hacer más comprimida? ¡Claro! Pero así puedes entender en detalle cada instrucción.

He aquí la función:

$opacidad = "0.5"; //Equivale al 50%
$colorHexadecimal = "#FF0000";
$split = str_split(substr($colorHexadecimal,1), 2);
  $r = hexdec($split[0]);
  $g = hexdec($split[1]);
  $b = hexdec($split[2]);
$colorRGB= "rgb(" . $r . ", " . $g . ", " . $b . ", $opacidad)";

¡Veamos paso a paso!

  1. Almacenamos en dos variables la opacidad y el color en hexadecimal.
  2. Con substr nos quedamos con los 6 dígitos que hay a partir de la almohadilla.
  3. Mediante str_split dividimos la cadena en un array de trocitos de 2 caracteres, tal y como indica el segundo parámetro.
  4. Pasamos el valor de cada elemento del array de hexadecimal a decimal con hexdec y lo almacenamos en una variable de color.
  5. Creamos una variable colorRGB a la que le pasamos literalmente el texto rgb y los paréntesis, y como parámetros las tres componentes de color y la variable opacidad.

¿Tienes una propuesta mejor? ¡Compártela! Para ello te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Filed Under: Tips & Tricks Tagged With: colores, css, php, rgb, snippet

¿Qué diferencias hay entre defer y async?

Publicado el 14/10/2022 por Ada Leave a Comment

Hay dos atributos que nos permiten decidir el momento de carga de nuestros scripts. Son los atributos defer y async, y se indican en la propia etiqueta de <script> de nuestra página web.

¡Vamos a verlos!

Defer

El atributo defer es un atributo booleano que indica que el script se ejecuta cuando la página ha terminado de analizarse.

Es muy importante tener en cuenta que solamente se puede utilizar en scripts externos, es decir, en los que indicamos la ruta a través del atributo scr.

 <script src="script.js" defer></script> 

Async

El atributo async tiene muchas similitudes con el atributo defer. También es booleano, y solamente se puede utilizar en scripts externos.

La diferencia fundamental con respecto al anterior es que el script se carga en paralelo al análisis de la página y se ejecuta tan pronto como esté disponible, de manera que si el script está descargado por completo, el análisis de la página se interrumpe, se ejecuta el script y luego continúa el resto de la página.

<script src="script.js" async></script> 

Modos de ejecutar un script externo

Podemos encontrarnos varios modos de ejecutar un script externo:

  • Si en la etiqueta <script> aparece el atributo async, la secuencia de comandos se ejecuta mientras la página está analizando, es decir, de manera asíncrona.
  • Si en la etiqueta <script> aparece el atributo defer, el script se ejecuta cuando la página ha terminado de analizarse.
  • Si no hay ninguno de los dos, el script se ejecuta inmediatamente, antes de que el navegador analice la página.

Y para verlo de una manera super gráfica os dejo este gráfico de la web https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html que no tiene desperdicio:

Fuente: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

¿Conocías estos dos atributos? 😉


Filed Under: Tips & Tricks Tagged With: javascript

¡Error! Utilizar un igual (asignación) en lugar del doble igual (comparación) en estructuras de control

Publicado el 25/09/2022 por Ada Leave a Comment

Hacía tiempo que no escribía sobre errores clásicos de estudiantes de Javascript, pero esta semana no he podido por menos porque me he encontrado este error no una ni dos: tres veces.

Como ya se trabajé en la lección Javascript – #1.10. Operadores de comparación, a la hora de comparar dos valores podemos utilizar un doble o un triple igual.

En ningún caso debemos utilizar para comparar un signo igual.

Sobre este tema trabajamos en Javascript – #1.08. Operadores de asignación.

Y es que si utilizamos un único signo igual no estamos comparando, sino realizando una asignación, es decir, dándole un valor a una variable.

Veamos un ejemplo:

let x=5; // x toma el valor numérico 5
if (x=7) { console.log("La x vale " + x); }// Esta sentencia se ejecutará siempre ya que no comprueba si x es igual a 7, sino que le asigna a x el valor y, y devolverá un 7.

Por tanto, lo que deberíamos hacer en este caso sería lo siguiente:

let x=5; // x toma el valor numérico 5
if (x==7) { console.log("La x vale" + x); } // Esta sentencia no llegará a ejecutarse porque la x vale 5.

Recuerda que es muy importante asegurarnos de que cuando trabajamos con estructuras de control en las que se comprueba una condición (if, while, do while…), debemos realizar las comparaciones de igualdad con el doble o el triple igual; en ningún caso con un igual, ya que estaríamos asignando el valor en lugar de comparándolo.

¡Recuerda este error común en Javascript! ¡No es lo mismo utilizar un doble igual (comparación) que un igual (asignación)!

Tweet

Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?

Filed Under: Tips & Tricks Tagged With: errores, javascript

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to Next Page »

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2023

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.