GoogleChromeLabs/progressive-rendering-frameworks-samples

This repository has been archived on 26/Mar/2024
Stars
411
Rank 105,247 (Top 3 %)
Language
JavaScript
License
Apache License 2.0
Created over 5 years ago
Updated almost 2 years ago

GoogleChromeLabs/progressive-rendering-frameworks-samples

GoogleChromeLabs

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Samples and demos from the Progressive Rendering I/O talk

Progressive Rendering: Frameworks Samples

Installation

git clone [email protected]:GoogleChromeLabs/progressive-rendering-frameworks-samples.git
cd progressive-rendering-frameworks-samples

npm install
npm run lerna bootstrap

Run the Progressive Hydration Demo

cd react-progressive-hydration
npm start

Now check out the demo on http://localhost:2048!

squoosh

Make images smaller using best-in-class codecs, right in the browser.

comlink

Comlink makes WebWorkers enjoyable.

quicklink

⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time

ndb

ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools

carlo

Web rendering surface for Node applications

ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug

sw-precache

[Deprecated] A node module to generate service worker code that will precache specific resources so they work offline.

react-adaptive-hooks

Deliver experiences best suited to a user's device and network constraints

ui-element-samples

A collection of prototyped UI elements

sw-toolbox

[Deprecated] A collection of service worker tools for offlining runtime requests

webpack-libs-optimizations

Using a library in your webpack project? Here’s how to optimize it

critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.

psi

PageSpeed Insights Reporting for Node

bubblewrap

Bubblewrap is a Command Line Interface (CLI) that helps developers to create a Project for an Android application that launches an existing Progressive Web App (PWAs) using a Trusted Web Activity.

lighthousebot

Run Lighthouse in CI, as a web service, using Docker. Pass/Fail GH pull requests.

preload-webpack-plugin

Please use https://github.com/vuejs/preload-webpack-plugin instead.

worker-plugin

👩‍🏭 Adds native Web Worker bundling support to Webpack.

prerender-loader

📰 Painless universal pre-rendering for Webpack.

simplehttp2server

A simple HTTP/2 server for development

jsvu

JavaScript (engine) Version Updater

size-plugin

Track compressed Webpack asset sizes over time.

clooney

Clooney is an actor library for the web. Use workers without thinking about workers.

browser-fs-access

File System Access API with legacy fallback in the browser

proxx

A game of proximity

dark-mode-toggle

A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:

application-shell

Service Worker Application Shell Architecture

pwacompat

PWACompat to bring Web App Manifest to older browsers

container-query-polyfill

A polyfill for CSS Container Queries

idlize

Helper classes and methods for implementing the idle-until-urgent pattern

houdini-samples

Demos for different Houdini APIs

jsbi

JSBI is a pure-JavaScript implementation of the official ECMAScript BigInt proposal.

css-triggers

A reference for the render impact of mutating CSS properties.

howto-components

Literate code examples for common UI patterns.

tooling.report

tooling.report a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base.

page-lifecycle

PageLifecycle.js is a tiny JavaScript library that allows developers to easily observe Page Lifecycle API state changes cross browser

css-paint-polyfill

CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.

web-audio-samples

Web Audio API samples by Chrome Web Audio Team

chrome-for-testing

picture-in-picture-chrome-extension

estimator.dev

🧮 Calculate the size and performance impact of switching to modern JavaScript syntax.

comlink-loader

Webpack loader to offload modules to Worker threads seamlessly using Comlink.

pwa-wp

WordPress feature plugin to bring Progressive Web Apps (PWA) to Core

ProgressiveWordPress

A Sample WordPress-based Progressive Web App

web-push-codelab

text-app

A text editor for ChromeOS and Chrome

gulliver

A PWA directory, focusing on collecting PWA best practices and examples.

wasm-feature-detect

A small library to detect which features of WebAssembly are supported.

progressive-tooling

A list of community-built, third-party tools that can be used to improve page performance

svgomg-twa

A sample that project Trusted Web Activities technology to wrap SVGOMG in an Android Application

web-vitals-report

Measure and report on your Web Vitals data in Google Analytics

text-editor

A text editor build on the Native File System APIs

pptraas.com

Puppeteer as a service

wasm-bindgen-rayon

An adapter for enabling Rayon-based concurrency on the Web with WebAssembly.

MiniMobileDeviceLab

A mini mobile web device lab

webm-wasm

webm-wasm lets you create webm videos in JavaScript via WebAssembly.

link-to-text-fragment

Browser extension that allows for linking to arbitrary text fragments.

cronet-sample

A sample for the Cronet library

buffer-backed-object

Buffer-backed objects in JavaScript.

pinch-zoom

webpack-training-project

A training project for learning Webpack optimizations

samesite-examples

Examples of using the SameSite cookie attribute in a variety of language, libraries, and frameworks.

airhorn

AutoWebPerf

AutoWebPerf provides a flexible and scalable framework for running web performance audits with arbitrary audit tools including PageSpeedInsights, WebPageTest and more.

first-input-delay

A JavaScript library for measuring First Input Delay (FID) in the browser.

tti-polyfill

Time-to-interactive polyfill

react-shrine

"Shrine" Progressive Web App sample built with React

dynamic-import-polyfill

A fast, tiny polyfill for dynamic import() that works in all module-supporting browsers

wasi-fs-access

This is a demo shell powered by WebAssembly, WASI, Asyncify and File System Access API.

native-url

Node's url module implemented using the built-in URL API.

two-up

adaptive-loading

Demos for Adaptive Loading - differentially deliver fast, lighter experiences for users on slow networks & devices

so-pwa

A progressive web app to read Stack Overflow content.

import-from-worker

It’s like import(), but runs the module in a worker.

sample-pie-shop

Example e-commerce site to explore PWA (Progressive Web App) use cases.

file-drop

A simple file drag and drop custom-element

serial-terminal

Demo application for the Web Serial API.

form-troubleshooter

postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.

audioworklet-polyfill

🔊 Polyfill AudioWorklet using the legacy ScriptProcessor API.

http2-push-manifest

Generate a list of static resources for http2 push.

pointer-tracker

Track mouse/touch/pointer events for a given element.

pr-bot

🤖 Compare your base branch to a pull request and run plugins over it to view differences

discovery

Discoveries on Sustainable Loading research

imagecapture-polyfill

MediaStream ImageCapture polyfill. Take photos from the browser as easy as .takePhoto().then(processPhoto)

tasklets

telnet-client

extension-manifest-converter

credential-management-sample

Credential Management Sample

wadb

A TypeScript implementation of the Android Debug Bridge(ADB) protocol over WebUSB

extension-update-testing-tool

Tool for testing the update flow for Chrome Extensions during development, including permission grants.

wasm-av1

Port of the AV1 Video codec to WebAssembly

houdini.how

A community-driven gathering place for CSS Houdini worklets and resources.

pwa-workshop-codelab

perf-track

Tracking framework performance and usage at scale

kv-storage-polyfill

A polyfill for the kv-storage built-in module.

http2push-gae

Drop-in HTTP2 push on App Engine

chromeos_smart_card_connector

Smart Card Connector App for Chrome OS

snapshot

devwebfeed

Firehose of team++ resources

sample-currency-converter

A sample currency conversion Progressive Web App