En el admin de wordpress, el editor de entradas de Gutenberg por defecto muestra un tamaño máximo de 580px de ancho para los bloques que puede que se nos quede pequeño para trabajar. Para cambiar ese valor tenemos que sobrescribir […]

Cuando necesites que ciertos elementos no respondan (hover, click…) a eventos del ratón (o táctil)… tenemos la propiedad css pointer-events con su valor «none» para poder desabilitarlo y hacer ese elemento como «invisible al cursor». pointer-events: none; Para verlo en […]

Si usas la propiedad columns de css para dividir el contenido en «x» columnas y tienes el problema de que se corta el contenido de alguna columna por arriba/abajo puedes usar la propiedad break-inside del siguiente modo en cada elemento […]

Con SASS podemos crear una variable y usarla dentro de un determinado selector o clase. Para ello usaremos la interpolación de SASS envolviendo la variable dentro de la expresión #{}: Algunos ejemplo de uso: $nombre: "leon"; .header-#{$nombre} { color: black; […]

Vanilla JS: foreach

A continuación como recorrer un array usando el método forEach() de vanilla javascript. Vamos a ver 2 ejemplos diferentes, uno usando unos elementos del dom, y otro con un array en una variable. Ejemplo 1. Vamos a recorrer todos los […]

Dar formato a nuestro código de forma rápida (con un atajo de teclado) para que quede indentado en Visual Studio Code sin usar plugins, para tener nuestro código más organizado, bonito, tabulado y formateado… de forma rápida y sencilla. a) […]

2 formas diferentes de indentar código web en Sublime Text 3 sin usar plugins, para tener nuestro código más organizado, bonito, tabulado y formateado… de forma rápida y sencilla. a) Indentar desde el «menu» (opción por defecto): Seleccionamos el codigo […]

Ejemplo muy sencillo para contar y limitar la escritura a un determinado nº caracteres en un textarea usando vanilla js. En el siguiente ejemplo vamos a contar los caracteres a medida que vas escribiendo en el textarea limitando hasta un […]

Actualmente es muy sencillo usando solo CSS poder cambiar el «grosor» o «color» de la barra de desplazamiento o scroll del navegador web: a). Para cambiar el ancho usamos el pseudo-elemento -webkit-scrollbar. Ejemplo: .mi-elemento::-webkit-scrollbar{ width: 5px; } b). Para cambiar […]

Si usas el plugin de jQuery Trumbowyg como editor WYSIWYG, al escribir en el editor se usa el tag , pero es posible que quieras usar por defecto otro tag html diferente (div, span, h1…). A continuación un ejemplo para […]