Skip to content

Instantly share code, notes, and snippets.

View frozenfung's full-sized avatar
🏠
Working from home

frozenfung frozenfung

🏠
Working from home
View GitHub Profile
@taranda
taranda / dynamic-critical-path-css.md
Last active July 7, 2021 19:53
Dynamically Add Critical CSS to Your Rails App

Dynamically Add Critical CSS to Your Rails App

Optimizing the delivery of CSS is one way to improve user experience, load speed and SEO of your web app. This involves determining the "critical path CSS" and embeding it into the html of your page. The rest of the CSS for the site is loaded asynchronously so it does not block the rendering of your "above the fold" content. This Gist will show you how to dynamically generate critical path CSS for your Rails app.

In this example we will use the mudbugmedia/critical-path-css gem.

Prerequisites

You will need to set up caching and Active Job in your Rails app. I recommend using a thread-safe background job manager like resque.

@BinaryMuse
BinaryMuse / restful.js
Last active March 17, 2019 08:22
Express API with Async/Await
import express from "express";
/**
* Takes a route handling function and returns a function
* that wraps it after first checking that the strings in
* `reserved` are not part of `req.body`. Used for ensuring
* create and update requests do not overwrite server-generated
* values.
*/
function checkReservedParams(routeHandler, ...reserved) {
@sebmarkbage
sebmarkbage / Enhance.js
Last active January 31, 2024 18:33
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
@bradfrost
bradfrost / gist:59096a855281c433adc1
Last active September 4, 2023 15:01
Why I'm Not A JavaScript Developer

Answering the Front-end developer JavaScript interview questions to the best of my ability.

  • Explain event delegation

Sometimes you need to delegate events to things.

  • Explain how this works in JavaScript

This references the object or "thing" defined elsewhere. It's like "hey, thing I defined elsewhere, I'm talkin' to you."

  • Explain how prototypal inheritance works.
@staltz
staltz / introrx.md
Last active March 26, 2024 00:52
The introduction to Reactive Programming you've been missing
@codler
codler / flex.less
Last active October 7, 2023 07:01
Prefix flex for IE10 and Safari / iOS in LESS
/*! Prefix flex for IE10 and Safari / iOS in LESS
* https://gist.github.com/codler/2148ba4ff096a19f08ea
* Copyright (c) 2014 Han Lin Yap http://yap.nu; MIT license */
.display(@value) when (@value = flex) {
display: -ms-flexbox; // IE10
display: -webkit-flex; // Safari / iOS
}
.display(@value) when (@value = inline-flex) {
@branneman
branneman / better-nodejs-require-paths.md
Last active January 30, 2024 04:32
Better local require() paths for Node.js

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

@jed
jed / LICENSE.txt
Created May 20, 2011 13:27 — forked from 140bytes/LICENSE.txt
generate random UUIDs
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 Jed Schmidt <http://jed.is>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
@unscriptable
unscriptable / tiny Promise.js
Created February 7, 2011 06:02
A minimalist implementation of a javascript promise
// (c) copyright unscriptable.com / John Hann
// License MIT
// For more robust promises, see https://github.com/briancavalier/when.js.
function Promise () {
this._thens = [];
}
Promise.prototype = {