Skip to content

Instantly share code, notes, and snippets.

View ockam's full-sized avatar

Pierre Lemieux ockam

View GitHub Profile

To embed the contents of an SVG file into your site using NextJS 12 with the new Rust-based compiler, perform the following steps:

  1. Install @svg/webpack:
$ npm install --save-dev @svgr/webpack
  1. Create a svgr.config.js config file with the following contents. This will remove the width and height from the SVG but keep the viewBox for correct scaling.
@danielstgt
danielstgt / imagick3.4.4-PHP7.4-forge.sh
Last active April 19, 2024 11:33
Install ImageMagick / Imagick 3.4.4 on PHP 7.4 server (Laravel Forge)
#!/bin/bash
if [ "$EUID" -ne 0 ]
then echo "Please run as root"
exit
fi
apt-get install pkg-config libmagickwand-dev -y
cd /tmp
wget https://pecl.php.net/get/imagick-3.4.4.tgz
tar xvzf imagick-3.4.4.tgz
@monachilada
monachilada / gatsby-config.js
Last active October 16, 2020 19:03
Sample gatsby-config.js enabling live preview in Craft CMS
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 = {
@schettino
schettino / useUserReducer.ts
Created March 30, 2019 20:23
Better Reducers with React and Typescript 3.4
import { useReducer } from 'react'
export function updateName(name: string) {
return <const>{
type: 'UPDATE_NAME',
name
}
}
export function addPoints(points: number) {
@adactio
adactio / minimal-serviceworker.js
Last active August 18, 2023 09:15
An attempt at a minimal viable service worker.
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
// HTML files: try the network first, then the cache.
// Other files: try the cache first, then the network.
// Both: cache a fresh version if possible.
// (beware: the cache will grow and grow; there's no cleanup)
const cacheName = 'files';
@andrewdelprete
andrewdelprete / webpack.mix.js
Last active July 17, 2020 09:26
Laravel Mix: Tailwind CSS + PurgeCSS Example
let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let glob = require("glob-all");
let PurgecssPlugin = require("purgecss-webpack-plugin");
/**
* Custom PurgeCSS Extractor
* https://github.com/FullHuman/purgecss
* https://github.com/FullHuman/purgecss-webpack-plugin
*/
@brettburwell
brettburwell / img.html
Last active June 26, 2018 09:05
Craft macro to centralize the markup and config for responsive images
{# ================================================================== #}
{# Responsive Image Macro
{# ================================================================== #}
{#
Macro to centralize the markup and config for responsive images.
Based on an article by Marion Newlevant (@marionnewlevant) and
adapted for the Lazysizes plugin. Read more:
https://straightupcraft.com/articles/responsive-images-with-twig-macros
@jrmadsen67
jrmadsen67 / gist:bd0f9ad0ef1ed6bb594e
Last active February 15, 2022 08:41
Laravel Quick Tip: Handling CsrfToken Expiration gracefully
Quick tip for handling CSRF Token Expiration - common issue is when you use csrf protection is that if
a form sits there for a while (like a login form, but any the same) the csrf token in the form will
expire & throw a strange error.
Handling it is simple, and is a good lesson for dealing with other types of errors in a custom manner.
In Middleware you will see a file VerifyCsrfToken.php and be tempted to handle things there. DON'T!
Instead, look at your app/Exceptions/Handler.php, at the render($request, Exception $e) function.
All of your exceptions go through here, unless you have excluded them in the $dontReport array at the
@davidhund
davidhund / pragmatic-touch-icons.md
Last active September 4, 2020 15:42
Pragmatic Touch Icons

NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.

I'd like to hear how you approach this: @valuedstandards or comment on this gist.

The issue

You have to include a boatload of link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':

![Touch Icon Links](https://o.twimg.com/2/proxy.jpg?t=HBj6AWh0dHBzOi8vcGhvdG9zLTYuZHJvcGJveC5jb20vdC8yL0FBRGFGY1VRN1dfSExnT3cwR1VhUmtaUWRFcWhxSDVGRjNMdXFfbHRJWG1GNFEvMTIvMjI3OTE2L3BuZy8xMDI0eDc2OC8yL18vMC80L1NjcmVlbnNob3QlMjAyMDE1LTA0LTE0JTIwMTYuNTYuMjYucG5nL0NNejBEU0FCSUFJZ0F5Z0JLQUkvNGR1eDZnMzZmYnlzYWI3

@paulirish
paulirish / bling.js
Last active April 20, 2024 17:39
bling dot js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype;