Skip to content

Instantly share code, notes, and snippets.

Brewing coffee

Abe Estrada AbeEstrada

Brewing coffee
View GitHub Profile
gaearon /
Last active March 28, 2023 10:55
Next.js SPA example with dynamic client-only routing and static hosting

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

marcoarment / S3.php
Last active November 10, 2022 13:43
A simple PHP class to perform basic operations against Amazon S3 and compatible services.
View S3.php
A simple PHP class to perform basic operations against Amazon S3 and compatible
services. Requires modern PHP (7+, probably) with curl, dom, and iconv modules.
Copyright 2022 Marco Arment. Released under the MIT license:
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
jeroenvollenbrock / aws-cloudfront-basic-auth.js
Last active January 9, 2023 21:36
View aws-cloudfront-basic-auth.js
var USERS = {
protecteddir: [{
username: 'user',
password: 'pass',
//Response when auth is not valid.
var response401 = {
statusCode: 401,
mtgto / serve.mjs
Last active May 13, 2022 06:16
Hot reload and do incremental builds with `esbuild`
View serve.mjs
* Change from
* - Use top level await (Node.js v14.8.0+)
* - To use top level await, you need to write a script as ES Modules
* - Set chokidar options to avoid duplicate building
* - Define NODE_ENV (For React)
* - Add API proxy setting by using proxy-middleware
import chokidar from "chokidar";
import esbuild from "esbuild";
IanColdwater / twittermute.txt
Last active March 25, 2023 11:18
Here are some terms to mute on Twitter to clean your timeline up a bit.
View twittermute.txt
Mute these words in your settings here:
View node_hot_reload.js
const express = require('express');
const app = express();
// Application
app.get('/', function(req, res) {
if (process.env.NODE_ENV === 'development') {
for (var key in require.cache) {
delete require.cache[key];
digitalkaoz / index.js
Created December 20, 2017 21:32
gatsby in aws lambda
View index.js
const AWS = require("aws-sdk");
const {link} = require("linkfs");
const mock = require('mock-require');
const fs = require('fs');
const tmpDir = require('os').tmpdir();
exports.handler = (event, context) => {
voidfiles / index.json
Created May 19, 2017 22:08
Hugo JSON Feed Template add to layouts/index.json
View index.json
"version": "",
"title": {{ .Site.Title | jsonify }},
"home_page_url": {{ .Permalink | jsonify }},
{{ with .OutputFormats.Get "json" -}}
"feed_url": {{ .Permalink | jsonify }},
{{- end }}
{{ if ( or (.Site.Params.author_url) -}}
"author": {
{{ if -}}
addyosmani / flexbox-layout.css
Created January 29, 2017 19:31
Flexbox layout helper classes
View flexbox-layout.css
Flexbox CSS helpers from the Polymer team. Extracted from for use as just CSS.
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
askilondz / gistlog.yml
Last active February 24, 2023 15:44
Adaptive Streaming with MPEG-DASH and HLS using AWS
View gistlog.yml

Adaptive Streaming has become the neccessity for streaming video and audio. Unfortantely, as of this post, there isn't a whole lot of tutorials that accumulate all of the steps to get this working. Hopefully this post achieves that. This post focuses on using Amazon Web Services (AWS) to transcode for HLS and DASH and be the Content Delivery Network (CDN) that delivers the stream to your web page. We'll be using Video.js for the HTML5 player as well as javascript support libaries to make Video.js work with HLS and DASH.

So Here's what you need:

Set up three S3 buckets