Sia siakaramalegos

## cwv_tech_report_shopify.sql
# UPDATE THIS EACH MONTH
DECLARE _YYYYMMDD DATE DEFAULT '2023-07-01';


CREATE TEMP FUNCTION IS_GOOD(good FLOAT64, needs_improvement FLOAT64, poor FLOAT64) RETURNS BOOL AS (
  SAFE_DIVIDE(good, good + needs_improvement + poor) >= 0.75
);

CREATE TEMP FUNCTION IS_NON_ZERO(good FLOAT64, needs_improvement FLOAT64, poor FLOAT64) RETURNS BOOL AS (
  good + needs_improvement + poor > 0

## google-font-preconnect.html
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">

## basic_router.jsx
// BrowserRouter is the router implementation for HTML5 browsers (vs Native).
// Link is your replacement for anchor tags.
// Route is the conditionally shown component based on matching a path to a URL.
// Switch returns only the first matching route rather than all matching routes.
import {
  BrowserRouter as Router,
  Link,
  Route,
  Switch,
} from 'react-router-dom';

## future_performance.md

      
              1 file
            
          
              1 fork
            
          
              0 comments
            
          
              6 stars
            
          
                siakaramalegos
                / future_performance.md
            
            
              Last active
              October 4, 2022 19:08
            
              
                The Future of Front-End Performance 
              
          
    The Future of Front-End Performance

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).
The most recent version of the slides for this talk are here on SpeakerDeck (from RWX2018).
You can watch the video from Full Stack Fest in Barcelona here:
<a href="http://www.youtube.com/watch?feature=player_embedded&v=SA_Hp8l7lr4
" target="_blank">

  
## run_queries.sh
#!/bin/bash
#
# Converts BigQuery SQL to CSV.
#
# Usage:
#
# Before starting, install the BigQuery CLI, bq https://cloud.google.com/sdk/docs/install
#
# 1. Find all your queries and output the list of files into query_list.txt:
#  `find almanac.httparchive.org/sql/2022/mobile-web/*.sql > query_list.txt`

## webmentions.njk
<div class="webmentions content-grid-sibling" id="webmentions">

  {% set mentions = webmentions | getWebmentionsForUrl(metadata.url + webmentionUrl) %}
  {% set reposts = mentions | webmentionsByType('repost-of') %}
  {% set repostsSize = reposts | size %}
  {% set likes = mentions | webmentionsByType('like-of') %}
  {% set likesSize = likes | size %}
  {% set replies = mentions | webmentionsByType('in-reply-to')  %}
  {% set repliesSize = replies | size  %}

## prettier.md

      
              1 file
            
          
              1 fork
            
          
              0 comments
            
          
              0 stars
            
          
                siakaramalegos
                / prettier.md
            
            
              Last active
              January 12, 2022 00:41
            
              
                Adding Prettier to a project
              
          
    Adding Prettier to a Project

Basic steps for adding Prettier to a project and setting up a pre-commit hook when not using any other linter. Most of these steps can be found in the docs and through other links in the docs.

Install prettier:

$ npm install --save-dev --save-exact prettier


Create an empty config file to let tools know you're using Prettier:


## getLCPdetails.js
function getLcpElement() {
  return new Promise((resolve) => {
    new PerformanceObserver((entryList) => {
      const lcpCandidates = entryList.getEntries();
      const naiveLcpEntry = lcpCandidates[lcpCandidates.length - 1];

      resolve(naiveLcpEntry);
    }).observe({ type: "largest-contentful-paint", buffered: true });
  }).then(({ startTime, element, url, size, loadTime, renderTime }) => {
    let attributes = [];

## ControlledVsUncontrolledForms.js
import React, {Component} from 'react'
import serialize from 'form-serialize'

export class FrontEndPartyControlled extends Component {
  static defaultProps = {
    name: '',
    spiritAnimal: '',
  }

  constructor(props) {

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hi from Netlify</title>
</head>
<body>
  <h1>My first Netlify deploy 💌</h1>
</body>
	# UPDATE THIS EACH MONTH
	DECLARE _YYYYMMDD DATE DEFAULT '2023-07-01';


	CREATE TEMP FUNCTION IS_GOOD(good FLOAT64, needs_improvement FLOAT64, poor FLOAT64) RETURNS BOOL AS (
	SAFE_DIVIDE(good, good + needs_improvement + poor) >= 0.75
	);

	CREATE TEMP FUNCTION IS_NON_ZERO(good FLOAT64, needs_improvement FLOAT64, poor FLOAT64) RETURNS BOOL AS (
	good + needs_improvement + poor > 0
	<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
	<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">
	// BrowserRouter is the router implementation for HTML5 browsers (vs Native).
	// Link is your replacement for anchor tags.
	// Route is the conditionally shown component based on matching a path to a URL.
	// Switch returns only the first matching route rather than all matching routes.
	import {
	BrowserRouter as Router,
	Link,
	Route,
	Switch,
	} from 'react-router-dom';
	#!/bin/bash
	#
	# Converts BigQuery SQL to CSV.
	#
	# Usage:
	#
	# Before starting, install the BigQuery CLI, bq https://cloud.google.com/sdk/docs/install
	#
	# 1. Find all your queries and output the list of files into query_list.txt:
	# `find almanac.httparchive.org/sql/2022/mobile-web/*.sql > query_list.txt`
	<div class="webmentions content-grid-sibling" id="webmentions">

	{% set mentions = webmentions \| getWebmentionsForUrl(metadata.url + webmentionUrl) %}
	{% set reposts = mentions \| webmentionsByType('repost-of') %}
	{% set repostsSize = reposts \| size %}
	{% set likes = mentions \| webmentionsByType('like-of') %}
	{% set likesSize = likes \| size %}
	{% set replies = mentions \| webmentionsByType('in-reply-to') %}
	{% set repliesSize = replies \| size %}
	function getLcpElement() {
	return new Promise((resolve) => {
	new PerformanceObserver((entryList) => {
	const lcpCandidates = entryList.getEntries();
	const naiveLcpEntry = lcpCandidates[lcpCandidates.length - 1];

	resolve(naiveLcpEntry);
	}).observe({ type: "largest-contentful-paint", buffered: true });
	}).then(({ startTime, element, url, size, loadTime, renderTime }) => {
	let attributes = [];
	import React, {Component} from 'react'
	import serialize from 'form-serialize'

	export class FrontEndPartyControlled extends Component {
	static defaultProps = {
	name: '',
	spiritAnimal: '',
	}

	constructor(props) {
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hi from Netlify</title>
	</head>
	<body>
	<h1>My first Netlify deploy 💌</h1>
	</body>