Skip to content

Instantly share code, notes, and snippets.

View kerns's full-sized avatar
🎯
Pushing an update...

David Kerns kerns

🎯
Pushing an update...
View GitHub Profile
@kerns
kerns / UnicornScene.tsx
Created November 20, 2024 10:11
A React / Next.js 15 Friendly unicorn.studio Embed
'use client';
import { useEffect, useRef, useState } from 'react';
export type UnicornSceneProps = {
projectId: string;
width?: number | string;
height?: number | string;
scale?: number;
dpi?: number;
@kerns
kerns / README.md
Last active August 20, 2020 10:33
Warmer

Warmer

I needed this for priming some image-heavy pages that were slow to cold-load after a cleared cache.

It's ideal for pages with some form of lazyloading / async content pulled from a CDN or a CMS where the first request can take an unacceptably long time to fulfill.

It also generates full page screenshots which can be used in QA or rudimentary visual regression testing.

Setup

  • npm i puppeteer yargs chalk-animation
  • Create a file accessible over the network containing a simple list of URLs to warm.
@kerns
kerns / nginx_error_setup.txt
Last active March 29, 2023 13:05
One NGINX Error Page to Rule Them All
In /etc/nginx/ I have a file called errors.conf, which should try and pass errors to a error.php file in /var/www/admin/public
----
# Error handler, codes can also be combined
error_page 401 /error.php?c=401;
error_page 403 /error.php?c=403;
error_page 404 /error.php?c=404;
error_page 500 /error.php?c=500;
error_page 502 503 504 /error.php?c=50x;
@kerns
kerns / gist:5845810
Created June 23, 2013 17:30
Combining Breakpoints in Bourbon/Neat's media mixin
In a nut shell... it would be nice if instead of
@include media ($tablet) {
text-align: right;
}
@include media ($desktop) {
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>2-column “responsive” masonry layout without JS plugins</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
body {
text-align: center;
}
@kerns
kerns / _respond-to-ccmq.md
Created October 25, 2012 10:20
Conditionally Conjoined Media Queries for Sass (just a proposal, and quite possibly a bad one)

Conditionally Conjoined Media Queries (just a proposal, and quite possibly a bad one)

Sass 3.2 makes working with media queries a lot easier, mostly by clearing the way for mix-ins going by the name of "breakpoint" or "respond-to".

The basic pattern of defining queries and assigning them aliases that can be passed with includes that trigger full-blown rules is great, but it would also be nice if we could select/combine and otherwise extend control over these disparate rules with a little more flexibility.

Using the example respond-to below, I would love it if @include respond-to(large-screen && retina) would have the same effect as nesting these individual respond-to()'s within each other, and the rule(s) contained within would be applied when both queries matched (the screen is both large and retina).

The ability to conjoin a min and max width range of individual queries with something like respond-to(small-screen || medium-screen) woul