Skip to content

Instantly share code, notes, and snippets.

Avatar

Joan León nucliweb

View GitHub Profile
@nucliweb
nucliweb / Network-Throttling.md
Created Jun 8, 2021
Network Throttling Profile
View Network-Throttling.md

Throttling

Network Throttling Profile

Network Download (kbit/s) Upload (kbit/s) Latency (ms)
3G | 3G (Basic) 307.2 102.4 0
3G | HSPA 7372.8 1536 0
3G | HSPA+ 21504 4096 0
3G | DC-HSPA+ 43008 8192 0
View FromMiditoHue.js
const hueRange = {
min: 0,
max: 360
}
const midiRange = {
min: 36,
max: 96
}
const fromMidiToHue = (value) => {
const midiTotalValues = midiRange.max - midiRange.min
View Backlog.md

Backlog

CSS

  • Critical CSS
  • CSS analytics with Project Wallace
  • CSS Houdini
  • PurgeCSS to optimize your CSS

Web Performance

View fcbarcelona.css
@charset "UTF-8"; /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
View download-images.js
function getImages(uri) {
var request = require('request');
var url = require('url');
var cheerio = require('cheerio');
path = require('path')
var fs = require('fs');
request(uri, function (error, response, body) {
if (!error && response.statusCode == 200) {
$ = cheerio.load(body)
View index.html
<canvas id="canvas"></canvas>
<canvas id="postprocessing"></canvas>
<script id="shader-fs" type="x-shader/x-fragment">
precision highp float;
uniform sampler2D uImage;
uniform vec2 uResolution;
uniform float uTime;
varying vec2 vTexCoord;
void main() {
View .hiper.js
// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
config: {
// choose either `'stable'` for receiving highly polished,
// or `'canary'` for less polished but more frequent updates
updateChannel: 'stable',
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'>