nucliweb

Rust Resources

• The Algorithms
• Awesome Rust

Tools

• websocat
• Rocket: A web framework for Rust
• Blueboat is an open-source alternative to Cloudflare Workers

nucliweb

by Addy Osmani (@addyosmani)
https://twitter.com/addyosmani/status/743571393174872064

———

Preresolve DNS hostnames for assets
<link rel="dns-prefetch" href="https://my-site.com">

Begin a connection handshake in the background
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

nucliweb

const rels = ['preload', 'prefetch', 'preconnect', 'dns-prefetch', 'prerender', 'modulepreload']

rels.forEach(element => {
  const linkElements = document.querySelectorAll(`link[rel="${element}"]`)
  const dot = linkElements.length > 0 ? '🟩' : '🟥'
  console.log(`${dot} ${element}`)
  linkElements.forEach(el => console.log(el))
});

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