Skip to content

Instantly share code, notes, and snippets.

View kodetop's full-sized avatar

Kodetop kodetop

View GitHub Profile
@kodetop
kodetop / css-center.css
Last active March 30, 2024 22:33
Centrado vertical con Position
.center-position {
position: relative;
}
.center-position .block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@kodetop
kodetop / css-center.css
Last active March 30, 2024 22:25
Centrado vertical con Grid
.container {
display: grid;
place-items: center;
}
@kodetop
kodetop / css-center.css
Last active March 30, 2024 22:24
Centrado vertical con Flex
.container {
display: flex;
justify-content: center;
align-items: center;
}
@kodetop
kodetop / css-center.css
Last active March 30, 2024 22:26
Center horizontal with CSS
/* center using margin */
.container .content { margin: 0 auto; }
/* center using inline-block */
.container { text-align: center; }
.container .content { display: inline-block; }
/* center using flex */
.container { display: flex; justify-content: center; }
@kodetop
kodetop / css-center.html
Last active March 30, 2024 22:25
Estructura HTML para centrado
<div class="container">
<div class="content">Contenido</div>
</div>
@kodetop
kodetop / lazy-loading.js
Last active March 30, 2024 17:24
Lazy-Loading - JS
document.addEventListener("DOMContentLoaded", function() {
const lazyLoad = function() {
const lazyImages = document.querySelectorAll("img[data-src]");
lazyImages.forEach(img => {
console.log(img.src, img.dataset.src);
if (img.getBoundingClientRect().top <= window.innerHeight
&& img.getBoundingClientRect().bottom >= 0
&& getComputedStyle(img).display !== 'none') {
img.src = img.dataset.src;
@kodetop
kodetop / loady-loading-html.html
Last active March 30, 2024 17:26
Lazy-Loading - HTML
<img src="placeholder.jpg" data-src="imagen-01.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-02.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-03.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-04.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-05.jpg" width="640" height="360">
<img src="placeholder.jpg" data-src="imagen-06.jpg" width="640" height="360">
@kodetop
kodetop / functions.php
Last active June 25, 2023 03:50
Sintaxis wp_enqueue_style
// $handle: nombre del estilo (requerido)
// $src: ruta del archivo a incluir (requerido)
// $deps: nombre del estilo dependiente, se carga el dependiente previamente
// $ver: versión del archivo que vamos a incluir
// $media: media del estilo a incluir (‘all’, ‘screen’, ‘print’, ‘handheld’)
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
@kodetop
kodetop / welcome.php
Last active August 16, 2020 18:05
Code Style: Ejemplo de usando PSR-1
<?php
require 'Kodetop/UserProfile.php';
use Kodetop\UserProfile;
$user = new UserProfile();
echo 'Hello ' . $user->getName();
@kodetop
kodetop / UserProfile.php
Created August 16, 2020 18:02
Code Style: Ejemplo usando PSR-1
<?php
namespace Kodetop;
class UserProfile
{
const VERSION = '1.0';
var $name = 'Guest';
function getName()