Skip to content

Instantly share code, notes, and snippets.

View justinribeiro's full-sized avatar
🌞
Web Performance Tracing: because we can have nice things if you work for it.

Justin Ribeiro justinribeiro

🌞
Web Performance Tracing: because we can have nice things if you work for it.
View GitHub Profile
@justinribeiro
justinribeiro / font-report-devtools-snippet.md
Created October 18, 2019 15:43
Find font definitions of elements in a page.

Find font defintions for elements within a page with DevTools

This is simple DevTools snippt that uses TreeWalker to find textNodes, and then we parse what font styles are in use on that node with getComputedStyle.

Note, this won't travel the ShadowDOM which is it's own can of worms.

function findTextNodesFor(element){
  let node; 
  const discoveredTextNodes = []; 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>A simple responsive container</title>
</head>
<body>
<responsive-container>
{"userAgent":"Mozilla/6.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3537.0 Safari/537.36","lighthouseVersion":"3.0.3","fetchTime":"2018-08-30T19:07:45.641Z","requestedUrl":"https://ericbidelman.com/","finalUrl":"https://ericbidelman.com/","runWarnings":[],"audits":{"is-on-https":{"id":"is-on-https","title":"Uses HTTPS","description":"All sites should be protected with HTTPS, even ones that don't handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/https).","score":1,"scoreDisplayMode":"binary","rawValue":true,"displayValue":"","details":{"type":"table","headings":[],"items":[]}},"redirects-http":{"id":"redirects-http","title":"Redirects HTTP traffic to HTTPS","description":"If you've already set up HTTPS, make sure that you redirect all
@justinribeiro
justinribeiro / tasks.json
Created June 26, 2018 20:45
Running lighthouse-cli inside Visual Studio Code via tasks.json.
{
// Some basic lighthouse testing using docker, lighthouse-cli, jq, tr Note,
// you must search/replace the test url (no var support in tasks.json
// currently)
"version": "2.0.0",
"tasks": [
// NOTE: you don't have to run the container to make this work, you can
// simply change the lighthouse commands as required below to work with your
// setup (I find the container easier)
{
@justinribeiro
justinribeiro / io-schedule-2018.js
Last active April 14, 2018 19:39
Get a console list of your reserved schedule. Use as DevTools snippet. Because friends let friends know where they'll be at I/O (generally).
schedule = '';
sections = document.querySelectorAll(".schedule__grid__content");
sections.forEach(section => {
let time = '';
try {
time = section.querySelector(".schedule__grid__time").textContent;
} catch(e) {
time = section.querySelector('.schedule__grid__date');
if (time) {
@justinribeiro
justinribeiro / feature_detect_es_modules.js
Created November 22, 2017 23:21 — forked from ebidel/feature_detect_es_modules.js
Feature detect ES modules: both static import and dynamic import()
<!--
Complete feature detection for ES modules. Covers:
1. Static import: import * from './foo.js';
2. Dynamic import(): import('./foo.js').then(module => {...});
Demo: http://jsbin.com/tilisaledu/1/edit?html,output
Thanks to @_gsathya, @kevincennis, @rauschma, @malyw for the help.
-->
@justinribeiro
justinribeiro / instruct.md
Last active December 20, 2021 08:42
ssh-agent-windows
  1. Open git-bash on Windows.
  2. Make sure you have a .profile: touch .profile
  3. Open .profile and add:
env=~/.ssh/agent.env

agent_load_env () { test -f "$env" && . "$env" >| /dev/null ; }

agent_start () {
@justinribeiro
justinribeiro / instruct.md
Last active September 27, 2019 18:56
Generating icons for PWAs with imagemagick convert and the command line

Generate a set of icons for the manifest, index metadata, so forth.

convert raw-icon.png \
  \( -clone 0 -resize 512x512 -write icon-512.png \) \
  \( -clone 0 -resize 384x384 -write icon-384.png \) \
  \( -clone 0 -resize 192x192 -write icon-192.png \) \
  \( -clone 0 -resize 144x144 -write icon-144.png \) \
  \( -clone 0 -resize 96x96 -write icon-96.png \) \
 \( -clone 0 -resize 72x72 -write icon-72.png \) \
@justinribeiro
justinribeiro / eddystone-uid-gen.md
Created April 10, 2017 18:20
Sometimes I just need an EddyStone UID for testing.

Eddystone UID generate

Sometimes when I'm testing, I just need an UID and I don't particularly care about the ID portion. This little alias generate based on any string really (though should be FQDN).

alias genEuid='generateEddystoneUID'
generateEddystoneUID() {
  echo -n $1 | sha256sum | cut -b-10 | tr -d \\n | xxd -pu | xargs -I{} printf '%s%s' {} `od -vAn -N6 -tx2 < /dev/urandom | tr -d ' '`
}
@justinribeiro
justinribeiro / answers.md
Last active December 8, 2016 20:26
Answers for Martin's school project.

Q and A

Hopefully this helps your school project! --Justin

How long have you worked as a software engineer?

20-ish years. I wrote and sold my first piece of software when I was 16. Never looked back.

What made you want to become a software engineer?

Curiosity. My Mom taught me BASIC on a C64C back in 1987. My Dad bought a souped up 286 the that same year and said "if you break it, figure out how to fix it". I loved the challenge, I loved the problem solving. Building software was fun.