Skip to content

Instantly share code, notes, and snippets.

Joan León nucliweb

View GitHub Profile
View custom-metrics.js
[lcp]
const po = new PerformanceObserver(() => {});
po.observe({type: 'largest-contentful-paint', buffered: true});
const lastEntry = po.takeRecords().slice(-1)[0];
return lastEntry.renderTime || lastEntry.loadTime;
[cls]
const po = new PerformanceObserver(() => {});
po.observe({type: 'layout-shift', buffered: true});
return po.takeRecords().reduce((val, entry) => val + entry.value, 0);
View FontUsageAnalyzer.js
// Fork of https://github.com/paulcalvano/webfont-usage-analyzer/blob/master/Font_Analysis.js
// By Paul Calvanohttps://github.com/paulcalvano
// Font Usage Analyzer
// Parses CSS, Resource Timing and DOM to associate WebFont URLs with FontStacks.
// Allows for highlighting of font stacks correlating to WebFont URLs to examine where they are used on the page
// @author Paul Calvano
// @license MIT
// @copyright 2017 Akamai Technologies, Inc.
@nucliweb
nucliweb / meta-tags.md
Created Apr 3, 2020 — forked from whitingx/meta-tags.md
Complete List of HTML Meta Tags
View meta-tags.md

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>
@nucliweb
nucliweb / Image-Video-Optimization.md
Last active Sep 21, 2019
Twitter accounts you should follow if you like Image & Video Optimization
View Image-Video-Optimization.md
@nucliweb
nucliweb / OSX-disable-shadow-screenshot.md
Created Aug 29, 2019
disable the shadow added when capturing an entire window
View OSX-disable-shadow-screenshot.md

Disable the shadow

You can disable the shadow added when capturing an entire window by executing the following command from the Terminal:

defaults write com.apple.screencapture disable-shadow -bool TRUE; killall SystemUIServer

Enable the shadow

View index.html
<css-doodle>
:doodle {
@grid: 20x1 / 60vmin;
overflow: hidden;
}
:container {
transform: scale(25);
filter: @svg-filter(<svg>
<filter>
<feTurbulence baseFrequency="@r(.016, .056, .001)" seed="@r(100)" numOctaves="@r(8, 15)" />
@nucliweb
nucliweb / Hello-World.java
Created Jul 4, 2018
Code for "Aprender a programar con Processing y P5js" post
View Hello-World.java
// Imprimir Hello, Works! en Java
public class Main {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
@nucliweb
nucliweb / Optimizacion-Imagenes.md
Last active May 11, 2018
Temario para un curso de Optimización de imágenes para la web
View Optimizacion-Imagenes.md

Optimización de imágenes para la web

Sesión en abierto

Las imágenes representan más de un 60% del contenido del tráfico web. Desde los inicios de internet las hemos tenido presentes, lo curioso es que año tras año el porcentaje y peso está creciendo.

Mantener una buena optimización de las imágenes nos permitirá mejorar la experiencia de usuario.


You can’t perform that action at this time.