John F Morton johnfmorton

⌨️

Making stuff

Co-owner of JMX2 Inc. Former advertising creative directory, now happy code monkey. WebDev, Craft CMS, JS/CSS, writer.

johnfmorton / squarespace-hover-image-alt-tag.html

Last active October 1, 2024 17:07

Squarespace snippet - add to a page via "Page Header Code Injection" to add rollover of alt text to img with links

	/*
	* Add hover effect showing alt tag of images
	* with Squarespace 7.1 fluid image containers
	* John F Morton - https://supergeekery.com
	*/

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const imageContainers = document.querySelectorAll('.fluid-image-container.sqs-image-content')

johnfmorton / config.applesilicon.yaml

Last active July 25, 2024 20:51

DDEV config file to add chromium to an Apple Silicon machine. Useful when creating Critical CSS. See: https://nystudio107.com/docs/vite/#using-ddev

johnfmorton / video-allowed-htmlpurifier.json

Last active June 12, 2024 18:03

Sample HTMLPurifier config to allow YouTube and Vimeo embeds - used with CKEditor in Craft CMS

	{
	"HTML.SafeIframe": true,
	"URI.SafeIframeRegexp": "%^(https?:)?//(www.youtube.com/\|youtube.com/\|youtu.be/\|player.vimeo.com/)%"
	}

johnfmorton / ck-editor-video-embed-youtube.ts

Last active August 5, 2024 09:30

Sample Typescript used in conjunction with CKEditor to convert video embeds into video tags on frontend

	document.addEventListener('DOMContentLoaded', (event) => {
	// Find all oembed elements
	const oembedElements = document.querySelectorAll('oembed[url]');

	oembedElements.forEach(element => {
	const url = element.getAttribute('url');
	let videoId: string \| null;
	if (!url) return;
	videoId = extractYouTubeId(url);

johnfmorton / standard-plus-ck-editor-config.json

Last active August 5, 2024 09:30

CKEditor config with helpful additions - custom fonts, an addition font size example, and open links in new window option

johnfmorton / gist:639451fea75d84a5b89b5bcacb6ae8bb

Created May 16, 2024 17:52

Example script to get a YouTube video to display on a page that has an embed

	<script>
	document.addEventListener('DOMContentLoaded', (event) => {
	// Find all oembed elements
	const oembedElements = document.querySelectorAll('oembed[url]');

	oembedElements.forEach(element => {
	const url = element.getAttribute('url');
	const videoId = extractYouTubeId(url);

	if (videoId) {

johnfmorton / dontiframeme.html

Last active November 27, 2023 19:35

Don't allow your page to be rendered in an iframe.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Don't iFrame Me, Bro.</title>
	<style type="text/css">
	body {
	background: white;
	font-size: 2rem;

johnfmorton / better-img-tag-reset.css

Last active November 8, 2023 12:22

A better img reset for CSS

	/*

	References for this reset

	Video explanation:
	https://youtu.be/345V2MU3E_w?si=DCYNR9sQjp-cirs9

	The Ultimate Low-Quality Image Placeholder Technique:
	https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/

johnfmorton / doxter-cp-sticky-header-position.js

Created August 2, 2023 15:29

Doxter CP sticky header position tweak for Craft CMS

	// This is a small fix for the sticky header position for Doxter, https://github.com/verbb/doxter
	// I've included it in the Craft CMS control panel with another plugin, https://github.com/doublesecretagency/craft-cpjs
	// but it could also be included in a custom module.

	let resizeTimeout
	let styleTag
	let ruleIndex

	window.addEventListener('resize', () => {
	clearTimeout(resizeTimeout)

johnfmorton / docker-compose-plausible-analytics.yml

Created July 17, 2023 20:16

Plausible Analytics Docker Compose file for Laravel Forge using Traefik for routing traffic