Sia siakaramalegos

Timetable

当日のタイムテーブル

11/24

Speakers's dinner 🔈

when	where	who	what
19:30	Shibuya?	Staff + Speaker + Sponsers	Dinner

Testing double-fetching of `module`/`nomodule` JS code (including the Safari hack)

<script type="module" src="module.js"></script>
<script nomodule src="nomodule.js"></script>

Update September 2020: life's almost good. Edge Chromium is widely rolled out, and Safari 14.0 ships soon with a fix.

Test page: https://jg-testpage.github.io/es-modules/module-nomodule/

Crash Course in CrUX

CrUX is the Chrome UX Report from Google. This crash course will take you through everything you need to get the most out of the data.

1. Official Docs

https://developers.google.com/web/tools/chrome-user-experience-report/

2. Guides on web.dev

Speaker Rider

by Tatiana Mac

Last updated 14 April 2021

What is a speaker rider?

As speaking comes with immense privilege, I have crafted a speaker rider to set expectations and boundaries around my engagement. I am grateful to all the conference organisers who have brilliantly hosted me. I would love to continue to exercise this privilege to speak at conferences, and use this privilege to make the landscape more accessible and beneficial to tech's most historically excluded and marginalised communities.

Considerations

😫 I provide a lot of explanations for those of you who never had to consider these things. Most thoughtful conferences I've attended check most of these boxes intrinsically, particularly when conference runners are experienced speakers. They get it.

	// How to ensure that our animation loop ends on component unount

	componentDidMount() {
	this.startLoop();
	}

	componentWillUnmount() {
	this.stopLoop();
	}

	<!DOCTYPE html>
	<html>
	<head>
	<title>Marked Demo</title>
	<style type="text/css">
	body {
	margin: 0 auto;
	height: 100%;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	color: #333;

	const frames = [
	{
	width: 89,
	height: 64,
	bpp: 1,
	transparent: 0,
	buffer: E.toArrayBuffer(
	atob(
	'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAwAAAAAAAAAAAAgAEAAAAAAAAAAAMAABAAAAAAAAAABAAABAAAAAAAAAAMB/+AgAAAAAAAAAgf//ggAAAAAAAACD///wgAAAAAAAAIf///wgAAAAAAAAh4///xAAAAAAAACHg/w/BAAAAAAAAIfB+AcCAAAAAAAAB+B4AYCAAAAAAABH8HwAQEAAAAAAAAP4HDwwAAAAAAAAI/weLRyIAAAAAAAR/w4fh+IAAAAAABH//w/j8QAAAAAACP//j/H8AAAAAAAEf//H+P4gAAAAAAB//+P8PwAAAAAAAD//8f4fwAAAAAABH//4/w/iAAAAAACP//w/j/EAAAAAAI///h/H+AAAAAAAR///j+P8AAAAAAAH///H8f4AAAAAACP//+Hw/wAAAAAAAf//8Lj/gAAAAAAR///8KH/EAAAAAAD///4cf+IAAAAACH///4Q/8AAAAAAAP///4D/xAAAAAAQP///wH/iAAAAABAf///wf/AAAAAAAI////w/8AAAAAAIw////j/4gAAAAAjx////n/wAAAAACHh//////EAAAAAIfh/////+IAAAAAh/h/////8AAAAACH/h/////xAAAAAMf/h/////iAAAAAR//g/////AAAAABH//gP///8QAAAAEP//wB///4gAAAAQ///4D///xAAAABD///+H///iAAAAEP////////EAAAAQ////////+IAAABD////////+QAAAEP////////8AAAAQ/////////4gAAAj/////////xAAACP/////////iAAAEf/////////gAA

	# Cleanup old node_modules
	echo "Cleaning node_modules in projects older than 30 days"
	find . -name "node_modules" -type d -mtime +30 \| xargs rm -rf
	echo "Done cleaning node_modules"

	# Clean up homebrew
	echo "Clean homebrew"
	brew update && brew upgrade && brew cleanup
	echo "Done cleaning homebrew"

	/**
	* A bookmarklet for viewing the largest contentful paint in a page.
	* Will show each LCP after the bookmarklet is clicked.
	*
	* To install:
	* 1. Copy the code starting from the line beginning `javascript:`
	* 2. Add a new bookmark in Chrome, and paste the code in as the URL.
	**/
	javascript:(function(){
	try {

	// Credit to Michal Mocny (https://twitter.com/mmocny)
	//
	// Copy and paste this into the console and click around to see all interactions, whether they would pass INP,
	// and if you expand the entry you'll see the debug breakdown information.
	//
	// This is basically the same as the Core Web Vitals extension does: https://web.dev/debug-cwvs-with-web-vitals-extension/

	const valueToRating = (score) => score <= 200 ? 'good' : score <= 500 ? 'needs-improvement' : 'poor';

	const COLOR_GOOD = '#0CCE6A';