Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View caraya's full-sized avatar
🙈

Carlos Araya caraya

🙈
34 followers · 73 following
View GitHub Profile
@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 / 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.
@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>
@caraya
caraya / lazy-video-loader.js
Created March 5, 2019 22:12 — forked from benrobertsonio/lazy-video-loader.js
Lazy Loading Video Based on Connection Speed
class LazyVideoLoader {
constructor() {
this.videos = [].slice.call(document.querySelectorAll('.hero__bgvideo'));
// Abort when:
// - The browser does not support Promises.
// - There no videos.
// - If the user prefers reduced motion.
// - Device is mobile.
if (
@caraya
caraya / README.md
Created February 24, 2019 05:16 — forked from CodingDoug/README.md
Realtime Database triggers with Cloud Functions for Firebase - source

Realtime Database triggers with Cloud Functions for Firebase - source

This gist contains the source code in my video series about Realtime Database triggers. You can watch the three parts here:

  1. Part 1 (intro, onCreate)
  2. Part 2 (onUpdate, infinite loops)
  3. Part 3 (onDelete, transactions)

index.ts contains the Cloud Functions code, and dialog.ts contains the script to run

@caraya
caraya / lettering.html
Created November 1, 2018 01:53 — forked from adactio/lettering.html
A quick'n'dirty way of doing some lettering.js stuff without jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.slogan span:nth-child(odd) {
color: red;
}
</style>
</head>
@caraya
caraya / package.json
Created April 19, 2018 05:45 — forked from surma/package.json
Boilerplate for quick one-off TypeScript projects. Just run `npm start`
{
"name": "tsquickstart",
"version": "1.0.0",
"description": "Boilerplate for quick one-off TypeScript projects. Just run `npm start`",
"scripts": {
"init": "test -f tsconfig.json || (tsc --init -t ESNext -m ESNext && npm install)",
"start": "npm run init && concurrently \"npm run watch\" \"npm run serve\"",
"serve": "http-server",
"watch": "tsc -p . --watch",
"build": "tsc -p ."
@caraya
caraya / gulpfile.babel.js
Created August 3, 2016 04:09 — forked from timothyis/gulpfile.babel.js
Gulp 4, ES6 gulpfile example
// Gulp module imports
import {src, dest, watch, parallel, series} from 'gulp';
import del from 'del';
import livereload from 'gulp-livereload';
import sass from 'gulp-sass';
import minifycss from 'gulp-minify-css';
import jade from 'gulp-jade';
import gulpif from 'gulp-if';
import babel from 'gulp-babel';
import yargs from 'yargs';