martes, 14 de diciembre de 2021

HTML, CSS y Javascript Online con Codi.link y otros

Aunque todo esto lo puedes hacer en local y con tu editor de código, hay veces que quieres probar "en vivo" algunas alternativas de código, css, html o javascript. Y es posible que tu editor de código admita addons para hacer todo esto en una misma pantalla. Pero también somos muchos los desarrolladores que no queremos "petar" nuestros editores y recurrimos a herramientas online, a veces desarrolladas por nosotros mismos, para hacer esta "zona de ensayo".

Pues para facilitarte esto, muchos publican sus propias herramientas online para beneficio de la comunidad (y algunos para beneficio publicitario, algo nada reprochable).

CODI.LINK

El primero que te recomiendo es Codi.Link, del youtuber/streamer Miguel Ángel Durán.

De reciente creación y con la ayuda de sus seguidores, promete convertirse en uno de las mejores zonas de pruebas de CSS, Html y Javascript online.

CODEPEN

Uno de los más conocidos y usados es CodePen. Similar al anterior y con multitud de funciones.

JS.DO

Una zona de pruebas que yo he usado (y uso) desde hace mucho tiempo, ya que es simple y sin separación de código es JS DO de Rodrigo Siqueira.

jueves, 5 de agosto de 2021

CSS Centrar el contenido al centro horizontal y vertical

Centrar con CSS el contenido horizontal y vertical (imagen)

Hoy en día disponemos de un montón de herramientas y frameworks CSS para facilitar, tanto las tareas comunes, como el entendimiento de código html entre programadores.

Pues aún hoy pocas (o con muchas vueltas) nos permiten de una forma fácil centrar un elemento en pantalla o en otra capa contenedor. Siendo, muchas veces, la forma más fácil recurrir a una tabla 100% de tamaño ancho-alto y con una celda con contenido centrado.

Pero eso... lo puedes hacer directamente y fácil, con CSS.

Aquí te dejo este código en CSS puro por si es de tu interés.

  
  	div.container-middle {
    display: table-cell;
    vertical-align: middle;
    align-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
	}

	div.container-middle div {
    margin: auto;
	}
  

Como verás es una clase enlazada a un div, y cuyos divs hijos serán centrados, también, horizontalmente. El nombre de la clase... pues si usas Bootstrap o similar, para que siga cierta homogeneidad. Actuaría como un container-fluid. Y no, a día de hoy (versión Bootstrap 5.x) no existe esa clase.