Sia siakaramalegos

## Interaction snippet
// 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';

## LargestContentfulPaintBookmarklet.js
/**
 * 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 {

## tatiana-mac-speaker-rider.md

      
              1 file
            
          
              42 forks
            
          
              19 comments
            
          
              305 stars
            
          
                tatianamac
                / tatiana-mac-speaker-rider.md
            
            
              Last active
              March 24, 2024 12:22
            
              
                Tatiana Mac's Speaker Rider
              
          
    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.

  
## CrashCourseInCrUX.md

      
              1 file
            
          
              1 fork
            
          
              0 comments
            
          
              12 stars
            
          
                rviscomi
                / CrashCourseInCrUX.md
            
            
              Last active
              May 7, 2019 10:52
            
              
                "Crash Course in CrUX" for the PerfMatters conference, April 2019
              
          
    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


## cleanup.sh
# 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"

## double-fetch-triple-fetch.md

      
              1 file
            
          
              2 forks
            
          
              9 comments
            
          
              35 stars
            
          
                jakub-g
                / double-fetch-triple-fetch.md
            
            
              Last active
              April 13, 2024 12:22
            
              
                Will it double-fetch? Browser behavior with `module` / `nomodule` scripts
              
          
    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/

  
## pixl-js-party-parrot.js
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

## markdown-editor.html
<!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;

## nodefest_timetable.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              2 stars
            
          
                yosuke-furukawa
                / nodefest_timetable.md
            
            
              Last active
              October 18, 2017 02:15
            
              
                NodeFest Timetable
              
          
    Timetable

当日のタイムテーブル
11/24

Speakers's dinner 🔈


when
where
who
what


19:30
Shibuya?
Staff + Speaker + Sponsers
Dinner


## requestAnimationFrame.js
// How to ensure that our animation loop ends on component unount

componentDidMount() {
  this.startLoop();
}

componentWillUnmount() {
  this.stopLoop();
}
	// 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';
	/**
	* 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 {
	# 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"
	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
	<!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;
	// How to ensure that our animation loop ends on component unount

	componentDidMount() {
	this.startLoop();
	}

	componentWillUnmount() {
	this.stopLoop();
	}