Skip to content

Instantly share code, notes, and snippets.

Avatar
🦄

Sia siakaramalegos

🦄
View GitHub Profile
@siakaramalegos
siakaramalegos / getLCPdetails.js
Last active Jun 29, 2021
Custom metric for getting LCP image details
View 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 = [];
View 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>
@siakaramalegos
siakaramalegos / debug.txt
Created Nov 24, 2020
DEBUG=* netlify dev output for eleventy project
View debug.txt
2020-11-24T19:42:19.111Z Eleventy Directories:
Input: .
Data: _data
Includes: _includes
Layouts: undefined
Output: _site
Template Formats: html,njk
Verbose Output: false
2020-11-24T19:42:19.140Z Eleventy:EleventyFiles Searching for: [ './**/*.html', './**/*.njk', '!./_site/**', '!./node_modules/**', '!./package-lock.json', '!./.DS_Store', '!./.netlify/**', '!./_site/**', '!./_includes/**', '!./_data/**' ]
2020-11-24T19:42:19.147Z Eleventy:TemplateWriter Found: [ './src/index.html', './src/_includes/layout.njk' ]
@siakaramalegos
siakaramalegos / prettier.md
Last active Nov 6, 2020
Adding Prettier to a project
View prettier.md

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.

  1. Install prettier:
$ npm install --save-dev --save-exact prettier
  1. Create an empty config file to let tools know you're using Prettier:
View choose-a-tron.markdown
@siakaramalegos
siakaramalegos / Dev-api-summary.md
Last active Nov 23, 2019
Dev.to API summary for possible Bridgy integration
View Dev-api-summary.md
@siakaramalegos
siakaramalegos / webmentions.njk
Created Nov 22, 2019
Version of my webmentions nunjucks file used when writing my post about Webmentions and Eleventy
View 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 %}
@siakaramalegos
siakaramalegos / resources.md
Last active Jun 15, 2020
Modern JavaScript for Modern Browsers resource list
View resources.md

Vintage Bundles, aka Modern JavaScript for Modern Browsers

Web performance matters. From SEO to bottom-line revenue impacts, performance can make or break your app. However, fixing performance feels like a quagmire of expert-level topics. What if I told you JavaScript bundle sizes could be cut up to 50% by doing one thing only? Nearly 90% of web traffic runs on modern browsers, but we're transpiling all of our JavaScript to ES5. That’s expensive. In this talk, we'll learn about differential serving, or serving both modern bundles and legacy bundles using webpack. This talk is framework agnostic, and best if you have at least a basic understanding of JavaScript.

Slides and Controls

The slides are deployed here. To advance the slides, use n for next and p for previous. The right arrow jumps to the next section (and left for previous section). Up and down to advance through slides within a section.

Articles and research/tests

  • [Deploying ES2015+ Co
@siakaramalegos
siakaramalegos / double-fetch-triple-fetch.md
Last active Nov 19, 2019 — forked from jakub-g/double-fetch-triple-fetch.md
Will it double-fetch? Browser behavior with `module` / `nomodule` scripts
View double-fetch-triple-fetch.md
View preload.html
<link rel="preload" as="font" type="font/woff2"
href="./fonts/muli-v12-latin-regular.woff2" crossorigin>
<link rel="preload" as="font" type="font/woff2"
href="./fonts/muli-v12-latin-700.woff2" crossorigin>