bytemain

<button id="cake">Take Screeny</button>

<br />

<canvas id="fake"></canvas>

alekseykulikov

In this article, I would like to share three features of PageSpeed Insights (PSI), that is not easy to find in the official documentation. I discovered them while hacking on the Lighthouse plugin and integrating PSI to Treo.sh.

For a context, PSI is a simple yet powerful API by Google, that audits your page using Lighthouse and provides real-world users' data from Chrome UX Report (CrUX).

1. Audit many categories with one request

By default, PSI API returns only performance category. It's possible to pass ?category argument multiple times and get a report with many Lighthouse categories using one request (available categories: performance, accessibility, best-practices, seo, pwa).

curl -i "https://www.googleapis.com/pagespe

LukasBombach

Partial Hydration

If you do server side rendering (SSR) you don't necessarily need to hydrate your entire page if most of your content ist static and only some parts are interactive / dynamic. That is especially true for a newspaper website, which ich what we are working on.

What you want is partial hydration, sometimes called or related to progressive hydration or lazy hydration.

There are a few implementations out there to achive this, for instance second-dehydrator

sindresorhus

'use strict';

const puppeteer = require('puppeteer');

(async () => {
    /* PRECONDITION:
    0. download ublock, I used https://github.com/gorhill/uBlock/releases/download/1.14.19b5/uBlock0.chromium.zip
    1. run $PATH_TO_CHROME --user-data-dir=/some/empty/directory --load-extension=/location/of/ublock
    2. enable block lists you want to use
    */

smikula

let JSONStream = require('jsonstream');
let fs = require('fs');
let es = require('event-stream');

function readStatsJson(path) {
    return new Promise((resolve, reject) => {
        let parsedObject = {};

        let stream = fs
            .createReadStream(path, { encoding: 'utf8' })

mohanpedala

Table of Contents

• set -e, -u, -x, -o pipefail
• set -e
• set -x
• set -u
• set -o pipefail
• Setting IFS
• Original Reference

set -e, -u, -x, -o pipefail

samarpanda

Performance matters

1. https://speedcurve.com/blog/
2. https://calendar.perfplanet.com/2017/an-audit-of-boomerangs-performance/
3. Time to interactive - Measuring more of the user experience - https://calendar.perfplanet.com/2017/time-to-interactive-measuring-more-of-the-user-experience/
4. PERCEPTION MATTERS: MAKING RUM MORE REAL - https://blogs.akamai.com/2018/04/perception-matters-measure-perceived-performance.html
5. Web performance made easy - https://developers.google.com/web/updates/2018/08/web-performance-made-easy
6. Url not working - https://developer.akamai.com/blog/2017/04/12/gauge-user-experience-time-interactive/
7. Github containing most suggestions around perf - https://github.com/fabkrum/web-performance-resources
8. Frontend performance checklist - https://github.com/thedaviddias/Front-End-Performance-Checklist

jeroenvisser101

export const setCookies = async (page, cookies) => {
  const items = cookies
    .map(cookie => {
      const item = Object.assign({}, cookie);
      if (!item.value) item.value = "";
      console.assert(!item.url, `Cookies must have a URL defined`);
      console.assert(
        item.url !== "about:blank",
        `Blank page can not have cookie "${item.name}"`
      );

muralikg

/* global chrome, MediaRecorder, FileReader */

chrome.runtime.onConnect.addListener(port => {
  let recorder = null
  port.onMessage.addListener(msg => {
    console.log(msg);
    switch (msg.type) {
      case 'REC_STOP':
        console.log('Stopping recording')
        if (!port.recorderPlaying || !recorder) {

nat-n

Building fontconfig

Start up a lambda-like docker container:

docker run -i -t -v /tmp:/var/task lambci/lambda:build /bin/bash

Install some dependencies inside the container:

yum install gperf freetype-devel libxml2-devel git libtool -y

easy_install pip