Skip to content

Instantly share code, notes, and snippets.

Avatar
🦄

Sia siakaramalegos

🦄
View GitHub Profile
@siakaramalegos
siakaramalegos / basic_router.jsx
Last active Jan 13, 2022
Basic example of React Router: BrowserRouter, Link, Route, and Switch
View basic_router.jsx
// BrowserRouter is the router implementation for HTML5 browsers (vs Native).
// Link is your replacement for anchor tags.
// Route is the conditionally shown component based on matching a path to a URL.
// Switch returns only the first matching route rather than all matching routes.
import {
BrowserRouter as Router,
Link,
Route,
Switch,
} from 'react-router-dom';
@siakaramalegos
siakaramalegos / prettier.md
Last active Jan 12, 2022
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:
@siakaramalegos
siakaramalegos / future_performance.md
Last active Dec 2, 2021
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"

@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 / 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 = [];
@siakaramalegos
siakaramalegos / ControlledVsUncontrolledForms.js
Last active Dec 15, 2020
Controlled vs Uncontrolled/Serialized Forms in React
View ControlledVsUncontrolledForms.js
import React, {Component} from 'react'
import serialize from 'form-serialize'
export class FrontEndPartyControlled extends Component {
static defaultProps = {
name: '',
spiritAnimal: '',
}
constructor(props) {
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' ]
View choose-a-tron.markdown
@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