Skip to content

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 100px;
@caraya
caraya / performance-observer-ga.js
Created April 22, 2022 21:30 — forked from JMPerez/performance-observer-ga.js
An example of Performance Observer reporting data to Google Analytics
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// `name` will be either 'first-paint' or 'first-contentful-paint'.
const metricName = entry.name;
const time = Math.round(entry.startTime + entry.duration);
ga('send', 'event', {
eventCategory: 'Performance Metrics',
eventAction: metricName,
eventValue: time,
@caraya
caraya / Convert MARKDOWN files to HTML
Created April 30, 2021 08:06 — forked from jose8a/Convert MARKDOWN files to HTML
Converting a folder full of markdown files, each linking to each other ... convert those files to HTML, and convert the relative links to point to the new html files. Add code highlighting with highlight.js . Finally serve up the result as a static web site.
Converting md files to html w/highlighting
0a) Create a root directory to pull in all the repos
0b) Recursively clone or pull each repo
$> git clone <repo_url> | git pull on the existing repos
0c) Create a TOC index.html file for the root folder
$> echo '<head>' >> index.html
$> echo '' >> index.html
$> echo '</head>' >> index.html
$> echo '<body>' >> index.html
$> ls >> temp.html
@caraya
caraya / webstoemp-gulpfile.js
Created January 24, 2020 18:36 — forked from jeromecoupe/webstoemp-gulpfile.js
Gulp 4 sample gulpfile.js. For a full explanation, have a look at https://www.webstoemp.com/blog/switching-to-gulp4/
"use strict";
// Load plugins
const autoprefixer = require("autoprefixer");
const browsersync = require("browser-sync").create();
const cp = require("child_process");
const cssnano = require("cssnano");
const del = require("del");
const eslint = require("gulp-eslint");
const gulp = require("gulp");
@caraya
caraya / query.sql
Last active January 20, 2020 21:17
-- Trying to figure out if this query is correct
-- and whether there are wasy to optimize it soo it
-- won't take as long as it does to run and produce results
SELECT
_TABLE_SUFFIX AS yyyymm,
SUM(fcp.density) AS average_fcp,
SUM(fp.density) as average_fp,
SUM(dcl.density) as average_dcl
FROM
`chrome-ux-report.country_cl.*`,
@caraya
caraya / scripts-to-footer-exclude-amp.php
Created December 4, 2019 04:27 — forked from westonruter/scripts-to-footer-exclude-amp.php
Exclude all AMP scripts from being moved to the footer by the Scripts To Footer plugin. All AMP scripts have async anyway so they do not need to be moved to the footer for performance.
/* eslint-disable require-jsdoc */
/* eslint-disable valid-jsdoc */
'use strict';
// Require Gulp first
const gulp = require('gulp');
// packageJson = require('./package.json'),
// Load plugins
const $ = require('gulp-load-plugins')({
lazy: true,
@caraya
caraya / displacement.html
Created March 25, 2019 23:15 — forked from akella/displacement.html
svg displacement animation
<filter id="displacement" filterUnits="objectBoundingBox">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2" result="turb"/>
<feColorMatrix in="turb" result="huedturb" type="hueRotate" values="90">
<animate attributeType="XML" attributeName="values" values="0;180;360" dur="6s" repeatCount="indefinite"/>
</feColorMatrix>
<feDisplacementMap in="SourceGraphic" in2="huedturb" scale="20" result="displace" xChannelSelector="B"/>
<feOffset dx="-5" dy="-5" in="displace" result="unoffsetdisplace"/>
</filter>
/* Monospaced font for code samples */
@font-face {
font-family: "notomono_regular";
src: url("../fonts/notomono-regular.eot");
src: url("../fonts/notomono-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/notomono-regular.woff2") format("woff2"), url("../fonts/notomono-regular.woff") format("woff"), url("../fonts/notomono-regular.ttf") format("truetype"), url("../fonts/notomono-regular.svg#notomono_regular") format("svg");
font-weight: normal;
font-style: normal;
}
/* Regular font */
@font-face {