• 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

Ada

5 errores comunes que no debes cometer en Javascript

Publicado el 22/11/2023 por Ada Leave a Comment

Logotipo de Javascript

He estado dándole vueltas a cuáles son los errores más comunes al programar en Javascript que me encuentro en los ejercicios de mi alumnado y en algunos de los códigos que me envíais algunos/as codelovers y hay al menos cinco se repiten una y otra vez: declaración de variables con var, no entender la asincronía de Javascript y volverse locos/as con el orden de ejecución de las instrucciones, no mirar la consola cuando algo falla…

¿Quieres saber cuáles son en detalle? ¡Echa un ojo a este vídeo y te los cuento!

¿Cuáles son los tuyos? ¡Déjamelos en los comentarios! 😊

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

Aprende desestructuración en 5 minutos

Publicado el 14/11/2023 por Ada Leave a Comment

Logotipo de Javascript

Si alguna vez has trabajado con Arrays y Objetos en Javascript es posible que hayas tenido que guardar parte de estos elementos en variables.

El proceso puede resultar un poco rollo si tenemos que ir elemento a elemento del array, objeto , función, etc. creando las variables correspondientes. Sin embargo, desde ES6 hay un nuevo concepto que nos permite hacer esto de una manera súper sencilla.

Se llama desestructuración, o destructuring y nos permite precisamente eso: descomponer un array u objeto en elementos independientes que podemos asignar a variables o constantes ¡en una única instrucción!

En el siguiente vídeo realizado en colaboración con Garage de Ideas te enseño en cinco minutitos qué es la desestructuración y los diferentes tipos:

Código fuente del ejemplo

En el siguiente código fuente puedes ver todo lo tratado en el vídeo:

const lenguajes = ["Javascript", "C++", "Ada", "Python"];
const [j, c] = lenguajes;
console.log(j);
console.log(c);

const[primero, ...rest] = lenguajes;
console.log(primero);
console.log(rest);

let d, s;
[d, s="Swift"] = ["Delphi", "Scala"];
console.log(d);
console.log(s);

const agencia = {
    nombre: "Garage de ideas",
    anio: 2015,
    verdad: true
}

/*const {nombre, verdad} = agencia;
console.log(nombre);
//console.log(anio);
console.log(verdad);*/

/*const {nombre, ...rest2} = agencia;
console.log(nombre);
//console.log(anio);
console.log(rest2);*/

const {nombre: n, anio: a} = agencia;
console.log(n + " " + a);

Si quieres aprender algunas de las características más importantes de Javascript Moderno, ¡pásate por el curso de Didacticode!

Filed Under: Herramientas, Tips & Tricks Tagged With: editor de código, extensión, php, visual studio code, vsc

Configura tu Visual Studio Code para trabajar con PHP

Publicado el 07/11/2023 por Ada Leave a Comment

¿Has tenido que trabajar alguna vez con PHP? Seguro que te has preguntado cuál es el mejor modo de configurar tu editor de Visual Studio Code para sacar todo el partido con este lenguaje.

Pues bien, en este vídeo en colaboración con Garage de Ideas te enseño la configuración básica de Visual Studio Code para PHP y algunos de los plugins que más me gustan para trabajar con este lenguaje:

Configuración de PHP

Lo primero que tenemos que hacer es revisar la configuración del VSC para ver cómo está configurado PHP. Para ello accedemos a Configuración y escribimos PHP. Veremos que hay varias opciones:

  1. Suggest: permite controlar si están habilitadas las sugerencias de PHP.
  2. Validate: habilita o deshabilita la validación integrada de PHP.
  3. Path ejecutable: permite configurar la ruta del ejecutable de PHP.

¿Que no sabemos dónde encontrar la variable? Es muy sencillo.

  • En Mac podemos escribir en el terminal: which php
  • En Windows podemos hacer clic con el botón secundario en Mi PC y, a continuación, hacer clic en Propiedades. Luego clic en la pestaña Opciones avanzadas y ahí en Variables de entorno.

Extensiones para PHP

Veamos ahora algunas de las extensiones más importantes para aprovechar a tope todas las características del lenguaje:

  • En primer lugar veremos PHP, de Devsense, que ofrece multitud de características:
    • Completado rápido de código con tooltips informativos, etc.
    • Creación de getters, setters, implementación de interfaces.
    • Generación de PHP Doc, etc.
  • Otra extensión que no puede faltar es PHP Debug, de Xdebug, un adaptador entre Xdebug y VSC que nos permite realizar depuración avanzada para scripts de PHP. La instalación tiene su aquel, así que os recomiendo que sigáis las indicaciones del pluggin.
  • Ben Mewburn nos ofrece PHP Intelephense, que permite trabajar de forma productiva con PHP ofreciendo un montón de características interesantes, como
    • completado de código (intellisense).
    • ayuda para la creación de métodos, funciones, etc.
    • búsquedas avanzadas.
  • También hablaremos de Intellisense for PHP, que además de permitir finalizar código, ofrece multitud de información en sugerencias contextuales mientras escribes código PHP.
  • Veamos ahora PHP Awesome Snippets, que genera código automáticamente a partir de pequeños atajos:
    • php
    • gss
    • eco
  • Y por último, PHP DocBlocker, que te ayuda a generar automáticamente bloques de documentación PHP con solo presionar un atajo de teclados.

¿Las conocías? ¿Qué te parecen? ¡Deja tus comentarios por ahí debajo y cuéntamelo!

Filed Under: Herramientas, Tips & Tricks Tagged With: editor de código, extensión, php, visual studio code, vsc

Qué es async/await y cómo usarlo correctamente

Publicado el 31/10/2023 por Ada Leave a Comment

Async/await es una de las características más poderosas de Javascript que entró en la especificación de EcmaScript2017. A lo largo de esta lección te explicaré cómo usarla y qué problemas podemos encontrarnos.

Y si eres de los que prefieren vídeos, te dejo la colaboración que he hecho con Garage de ideas para que no te pierdas nada:

Promesas

Antes de meternos en harina con async-await, tenemos que entender los conceptos básicos de las promesas en JavaScript. Las promesas son una forma de manejar tareas asíncronas y, junto con async-await, nos permiten escribir un código más claro y legible.

¿Que no sabes lo que es una promesa?

Muy sencillo: una promesa es un objeto que representa el resultado de una operación asíncrona y se suele usar en tareas que toman cierto tiempo de procesamiento (por ejemplo, acceder a una API o leer un archivo) de manera ordenada y estructurada.

Es decir, creamos una promesa que tiene la lógica de la operación asíncrona y luego podemos encadenar métodos como then() o catch() para manejar la promesa en función de su estado, que puede ser pendiente, cumplida (then) o rechazada (catch). Así, entre otras cosas, evitamos anidar callbacks continuamente.

Las promesas han sido adoptadas en Javascript ampliamente y son la base de async-await.

imagen.png

¡Veamos cómo trabajar con ello!

Sintaxis de async/await

La sintaxis es muy sencilla. Usamos la palabra “async” antes de una función para decir que es asíncrona y la palabra “await”, que pausa la ejecución de la función a la espera de que se obtengan todos los datos y siempre debe estar dentro de la función async.

async function fetchData() {
    try {
        const response = await fetch("https://randomuser.me/api");
        const data = await response.json();
        console.log(data);
        document.getElementById("contenido").innerHTML = `
            <img src="${data.results[0].picture.large}" width="200px"/>
            <p>Nombre: ${data.results[0].name.first} ${data.results[0].name.last}
            `;
    }

    catch (error) {
        console.log("Error: " + error);
    }
}
fetchData();

En este ejemplo, podemos ver varias cosas:

  • La función que hemos llamado fetchData es asíncrona (por eso ponemos delante async), por lo que no bloquea la ejecución de otras tareas mientras espera a que se resuelva la promesa. Es decir, podríamos realizar otras tareas mientras se termina de ejecutar la función.
  • Luego usamos await a la espera de que la llamada a la API se resuelva y nos devuelva los datos en formato JSON.
  • Y además, hemos añadido un bloque catch que nos sirve para capturar errores en caso de que se produzcan.

Problemas en el uso de async/await

Como te comentaba al principio, es habitual que el uso de async/await de lugar a despistes o errores más comunes de lo que crees. Aquí tienes algunos de ellos:

  1. El primer problema que podemos encontrar es el olvido de marcar una función como “async” al usar “await” dentro de ella. Esto puede conducir a errores difíciles de depurar, ya que el código puede parecer correcto, pero no se comportará como esperamos.
  2. Otro problema que puede surgir es la falta de manejo adecuado de errores al utilizar async-await. Si no envolvemos nuestras operaciones asincrónicas en bloques “try-catch”, es posible que los errores pasen desapercibidos y no se manejen correctamente.
  3. Además, debemos tener en cuenta que el uso excesivo de async-await puede llevar a un código poco eficiente. Si tenemos múltiples operaciones asincrónicas y las esperamos una tras otra con await, estaremos bloqueando la ejecución de otras tareas y perdiendo el beneficio de la programación asíncrona.
  4. Debemos recordar que async-await solo funciona dentro de funciones marcadas como “async”. Si intentamos utilizar await fuera de una función asíncrona, nos encontraremos con errores de sintaxis.

¿Te ha quedado claro el uso de async/await? ¡Espero que sí! Y si tienes dudas o quieres comentar cualquier cosa al respecto, deja tu comentario 😉

Filed Under: Tips & Tricks Tagged With: es6, javascript, promesas

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

Extensiones para Visual Studio Code: Live Server y Five Server

Publicado el 30/04/2023 por Ada 4 Comments

¿Qué son Live Server y Five Server?

Live Server y Five Server son dos extensiones de Visual Studio Code que permiten crear un servidor web en tu equipo.

¿Pero qué es un servidor web?

Un servidor web permite servir contenido web a través de un puerto específico en el equipo local. Así el contenido estará accesible a través de un navegador. De este modo podemos utilizarlo para visualizar y probar aplicaciones web de manera sencilla y rápida.

Podemos abrir perfectamente un archivo HTML sin un servidor utilizando un navegador. Así vemos el contenido del archivo pero no necesariamente lo estamos sirviendo a través de un servidor web.

En cambio, si usamos Live Server, servimos el contenido a través de un servidor web local que ejecuta nuestro código en tiempo real y que, además, nos permite realizar cambios y ver los resultados inmediatos sin actualizar la página en el navegador cada vez que hacemos un cambio en el código, pudiendo interactuar con la aplicación de manera dinámica.

¿Qué características ofrecen?

Tal y como indica el desarrollador de Live Server, Ritwick Dey, en la página web oficial de la extensión, las características que ofrece son, entre otras:

  • Un servidor web de desarrollo rápido con recarga de navegador en vivo.
  • Iniciar y detener el servidor con un solo clic en la barra de estado.
  • Soporte para excluir archivos para detección de cambios.
  • Control de teclas de acceso rápido.
  • Número de puerto personalizable, raíz del servidor, navegador predeterminado.
  • Compatibilidad con cualquier navegador (p. ej., Firefox Nightly) mediante la línea de comandos avanzada.
  • Conexión remota a través de WLAN.
  • Soporte SVG, https, para proxy y para cualquier archivo, incluso páginas dinámicas, a través de Live Server Web Extension.
  • Admite espacio de trabajo multiroot.
  • Soporte https.

Por su parte, Yannick, en la página oficial de Five Server, cuenta que su extensión permite:

  • Actualizar archivos al instante mientras escribes en el teclado.
  • Resalta el código en el que estás trabajando en tu navegador.
  • Navega automáticamente a través del navegador al archivo de edición actual.
  • Incluye soporte PHP para server y recargar en vivo los archivos .php.
  • Admite toda las aplicaciones renderizadas del lado del servidor, como express.js.
  • Registros remotos visibles en la terminal.

Análisis a fondo de la extensión

Pero si lo que quieres es ver cómo funciona la extensión a fondo, en este videotutorial que he grabado para Garage de Ideas podrás verla en vivo y en directo:

Y tú, ¿la has probado? ¿Qué te parece? ¿Conoces alternativas interesantes? ¡Déjame un comentario y cuéntamelo!

Filed Under: Herramientas Tagged With: extensión, herramientas, visual studio code

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 12
  • 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 © 2026

¡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 .

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.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.