Skip to content

Instantly share code, notes, and snippets.

@matthewbeta
matthewbeta / readme.md
Created Jun 2, 2021 — forked from davidohlin/readme.md
Homestead allow CORS (with Sprig for Craft CMS)
View readme.md

Working allow CORS Homestead (with Sprig for Craft CMS)

Place the following in the server block of your sites nginx config, ie /etc/nginx/sites-enabled/example.com

# Allow CORS
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With,hx-current-url,hx-request,hx-target,hx-t>
@monachilada
monachilada / gatsby-config.js
Last active Oct 16, 2020
Sample gatsby-config.js enabling live preview in Craft CMS
View gatsby-config.js
const { createHttpLink } = require('apollo-link-http');
const fetch = require('node-fetch');
const store = require('store');
const sourceNodes = require('gatsby/dist/utils/source-nodes');
require('dotenv').config();
const craftGqlUrl = process.env.CRAFT_GQL_URL;
const craftGqlToken = process.env.CRAFT_GQL_TOKEN;
module.exports = {
View Importing Remote GraphQL Schema into Gridsome
const { setContext } = require('apollo-link-context');
const { HttpLink } = require('apollo-link-http');
const { introspectSchema, makeRemoteExecutableSchema } = require('graphql-tools');
const fetch = require('node-fetch');
module.exports = function(api) {
api.createSchema(async function(graphql) {
const http = new HttpLink({
uri: 'http://example.com/api',
fetch
@davidohlin
davidohlin / readme.md
Last active Jun 2, 2021
Homestead allow CORS
View readme.md

Working allow CORS Homestead

Place the following in the server block of your sites nginx config, ie /etc/nginx/sites-enabled/example.com

# Allow CORS
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
@thedaviddias
thedaviddias / Preload CSS - Not blocking CSS.html
Last active Dec 16, 2021
Preload CSS and don't block the DOM with your CSS file request.
View Preload CSS - Not blocking CSS.html
<link rel="preload" href="css/global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/global.min.css"></noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
!function(a){"use strict";var b=function(b,c,d){function j(a){if(e.body)return a();setTimeout(function(){j(a)})}function l(){f.addEventListener&&f.removeEventListener("load",l),f.media=d||"all"}var g,e=a.document,f=e.createElement("link");if(c)g=c;else{var h=(e.body||e.getElementsByTagName("head")[0]).childNodes;g=h[h.length-1]}var i=e.styleSheets;f.rel="stylesheet",f.href=b,f.media="only x",j(function(){g.parentNode.insertBefore(f,c?g:g.nextSibling)});var k=function(a){for(var b=f.href,c=i.length;c--;)if(i[c].href===b)return a();setTimeout(function(){k(a)})};return f.addEventListener&&f.addEventListener("load",l),f.onloadcssdefined=k,k(l),f};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);
/*! loadCSS rel=preload po
@ljharb
ljharb / array_iteration_thoughts.md
Last active May 16, 2022
Array iteration methods summarized
View array_iteration_thoughts.md

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

@adactio
adactio / basicServiceWorker.js
Last active Apr 13, 2022
A basic Service Worker, for use on, say, a blog.
View basicServiceWorker.js
'use strict';
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
(function() {
// Update 'version' if you need to refresh the cache
var staticCacheName = 'static';
var version = 'v1::';
@jamesacampbell
jamesacampbell / securing_wordpress_guide.md
Last active Jan 25, 2018
A ever-evolving guide on how I lockdown a new digital ocean wordpress droplet.
View securing_wordpress_guide.md

This guide is meant to be a signpost to guide the way, not a dictionary to memorize. Your mileage may vary. Two great sites to check speed and security: http://tools.pingdom.com/fpt/ & https://securityheaders.io

Initial setup

GET DIGITAL OCEAN

Buy a new Digital Ocean droplet with Wordpress pre-installed ($10 per month).

CREATE USERS AND LOCK DOWN SSH

ssh into the new instance based on the credentials Digital Ocean provided.

@zacwasielewski
zacwasielewski / product-image-srcset.liquid
Last active Sep 2, 2021
Shopify responsive product images with srcset. Picturefill-compatible.
View product-image-srcset.liquid
{% comment %}
Shopify responsive product images with srcset.
Example:
Include this snippet on a product page or within a products loop:
{% include 'product-image-srcset',
sizes: '(max-width: 640px) 50vw, (min-width: 641px) and (max-width: 960px) 33vw, 25vw' %}
@matthewbeta
matthewbeta / mediaquery.less
Created Apr 27, 2015
Mixin for media queries with .no-mq fallback (for <IE9)
View mediaquery.less
@sml-bp: 480px;
@med-bp: 720px;
@lrg-bp: 970px;
.phablet(@rules) {
@media screen and (min-width: @sml-bp) {
@rules();
}
};