Skip to content

Instantly share code, notes, and snippets.

View siakaramalegos's full-sized avatar
🦄

Sia siakaramalegos

🦄
View GitHub Profile
@siakaramalegos
siakaramalegos / double-fetch-triple-fetch.md
Last active November 19, 2019 17:11 — forked from jakub-g/double-fetch-triple-fetch.md
Will it double-fetch? Browser behavior with `module` / `nomodule` scripts
<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>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">
@siakaramalegos
siakaramalegos / font-face.css
Created December 1, 2018 00:22
for google fonts article
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@siakaramalegos
siakaramalegos / perf-worshop.md
Created November 29, 2018 20:26
Get in the Fast Lane: Measuring Web Performance

Get in the Fast Lane: Measuring Web Performance

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Pinterest reduced load times by 40% and saw a 15% increase in sign ups. Starbucks implemented a 2x faster time to interactive resulting in a 65% increase in rewards registrations. AliExpress reduced load by 36% and saw a 10.5% increase in orders.

Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. During this hands-on, full-day workshop, you will learn how to:

  • Optimize and familiarize yourself with your DevTools environment
  • Understand which metrics matter
  • Measure the performance of existing applications
  • Diagnose and prioritize performance problems
@siakaramalegos
siakaramalegos / react-perf-worshop.md
Last active November 19, 2018 21:04
Get in the Fast Lane: Measuring React Performance (workshop)

Get in the Fast Lane: Measuring React Performance

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Pinterest reduced load times by 40% and saw a 15% increase in sign ups. Starbucks implemented a 2x faster time to interactive resulting in a 65% increase in rewards registrations. AliExpress reduced load by 36% and saw a 10.5% increase in orders.

Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues in React apps using the React Profiler, Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. During this hands-on, full-day workshop, you will learn how to:

  • Optimize and familiarize yourself with your DevTools environment, including the React Profiler
  • Understand which metrics matter
  • Measure the performance of existing applications
  • Diagnose and prioritize performance problems
@siakaramalegos
siakaramalegos / .curlrc
Last active October 22, 2018 18:18
cURL response template to show timings, test with `curl -so /dev/null https://www.zasag.mn`
-w " namelookup: %{time_namelookup} s (dnslookup)\n connect: %{time_connect} s (tcp handshake = connect - namelookup)\n appconnect: %{time_appconnect} s (ssl handshake = appconnect - connect)\n pretransfer: %{time_pretransfer} s\nstarttransfer: %{time_starttransfer} s (wait = starttransfer - pretransfer)\n------------------\ntotal: %{time_total} s (data transfer = total - starttransfer)\nsize: %{size_download} bytes\n"
@siakaramalegos
siakaramalegos / clean-dino.js
Created October 18, 2018 20:51
Cleaner dino game code that also turns on/off LED
require("FontDennis8").add(Graphics);
var BTNL = BTN4;
var BTNR = BTN3;
var BTNU = BTN1;
var IMG = {
rex : [
// running
{ width : 20, height : 22, bpp : 1, transparent:0, buffer : E.toArrayBuffer(atob("AB/gA/8AN/AD/wA/8AP/AD4AA/yAfAgfwMP/Dn/Q//wP/8B/+AP/gB/wAP4AB2AAYgAAIAADAP//")) },
@siakaramalegos
siakaramalegos / party-parrot-name-twitter.js
Created October 18, 2018 20:44
Pixlr party parrot with name and twitter handle
// Party parrot
const frames = [
{
width: 89,
height: 64,
bpp: 1,
transparent: 0,
buffer: E.toArrayBuffer(
atob(
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAwAAAAAAAAAAAAgAEAAAAAAAAAAAMAABAAAAAAAAAABAAABAAAAAAAAAAMB/+AgAAAAAAAAAgf//ggAAAAAAAACD///wgAAAAAAAAIf///wgAAAAAAAAh4///xAAAAAAAACHg/w/BAAAAAAAAIfB+AcCAAAAAAAAB+B4AYCAAAAAAABH8HwAQEAAAAAAAAP4HDwwAAAAAAAAI/weLRyIAAAAAAAR/w4fh+IAAAAAABH//w/j8QAAAAAACP//j/H8AAAAAAAEf//H+P4gAAAAAAB//+P8PwAAAAAAAD//8f4fwAAAAAABH//4/w/iAAAAAACP//w/j/EAAAAAAI///h/H+AAAAAAAR///j+P8AAAAAAAH///H8f4AAAAAACP//+Hw/wAAAAAAAf//8Lj/gAAAAAAR///8KH/EAAAAAAD///4cf+IAAAAACH///4Q/8AAAAAAAP///4D/xAAAAAAQP///wH/iAAAAABAf///wf/AAAAAAAI////w/8AAAAAAIw////j/4gAAAAAjx////n/wAAAAACHh//////EAAAAAIfh/////+IAAAAAh/h/////8AAAAACH/h/////xAAAAAMf/h/////iAAAAAR//g/////AAAAABH//gP///8QAAAAEP//wB///4gAAAAQ///4D///xAAAABD///+H///iAAAAEP////////EAAAAQ////////+IAAABD////////+QAAAEP////////8AAAAQ/////////4gAAAj/////////xAAACP/////////iA