Skip to content

Instantly share code, notes, and snippets.

Avatar
🦄

Sia siakaramalegos

🦄
View GitHub Profile
View google-font-preconnect.html
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">
View google-font.html
<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">
@siakaramalegos
siakaramalegos / font-face.css
Created Dec 1, 2018
for google fonts article
View font-face.css
/* 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 Nov 29, 2018
Get in the Fast Lane: Measuring Web Performance
View perf-worshop.md

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 Nov 19, 2018
Get in the Fast Lane: Measuring React Performance (workshop)
View react-perf-worshop.md

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 Oct 22, 2018
cURL response template to show timings, test with `curl -so /dev/null https://www.zasag.mn`
View .curlrc
-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 Oct 18, 2018
Cleaner dino game code that also turns on/off LED
View clean-dino.js
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 Oct 18, 2018
Pixlr party parrot with name and twitter handle
View party-parrot-name-twitter.js
// 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
@siakaramalegos
siakaramalegos / dino-name-pixlr.js
Created Oct 18, 2018
Dino game plus name and twitter handle
View dino-name-pixlr.js
/* HOW TO USE:
* Enter your name below in 2 lines, where it says `NAME = `
* If you have a battery in the Pixl, remove it
* Add the battery while holding down Pixl's top left button
* Wait for the bootloader bar to go to the end, and hold down
even when told to release.
* Only release when the test fails and it says 'Erasing Saved Code'
* You now have a 100% blank Pixl.js
* Click the connect icon in the top left of the IDE
@siakaramalegos
siakaramalegos / future_performance.md
Last active Dec 1, 2020
The Future of Front-End Performance
View future_performance.md

The Future of Front-End Performance

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

The most recent version of the slides for this talk are here on SpeakerDeck (from RWX2018).

You can watch the video from Full Stack Fest in Barcelona here:

<img src="http://img.youtube.com/vi/SA_Hp8l7lr4/0.jpg"