nucliweb

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

nucliweb

const hueRange = {
  min: 0,
  max: 360
}
const midiRange = {
  min: 36,
  max: 96
}
const fromMidiToHue = (value) => {
  const midiTotalValues = midiRange.max - midiRange.min

nucliweb

Backlog

CSS

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

Web Performance

nucliweb

@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
}

nucliweb

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)

nucliweb

<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() {

nucliweb

// 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',

nucliweb

[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);

nucliweb

// 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

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'>