Alex Carpenter alexcarpenter

I am a UI engineer who enjoys working at the intersection of design and engineering teams.

alexcarpenter / intrinsic-ratios.html

Created December 7, 2017 02:55

Intrinsic Ratios with CSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Intrinsic Ratios</title>
	<style>
	body {
	max-width: 800px;

alexcarpenter / lazyloading.html

Last active December 8, 2017 13:52

How to lazyload images using lazysizes

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Lazy loading images</title>
	<style>
	body {
	max-width: 900px;

alexcarpenter / index.html

Created September 27, 2017 12:23 — forked from shelldandy/typekit.html

Master Race Typekit Solution by Glen Maddern

	<head>
	<script>
	if (window.localStorage && window.localStorage._tk_cache) {
	document.documentElement.classList.add('wf-active');
	var script = document.createElement('script');
	script.innerHTML = localStorage._tk_cache + ";(function () {var timeout = setTimeout(function () {document.documentElement.classList.remove('wf-active');}, 300); Typekit.load({ async: false, active: function () { clearTimeout(timeout); }});})();";
	document.head.appendChild(script);
	}
	window._tk_onload = function () {
	var req = new XMLHttpRequest()

alexcarpenter / axios.js

Created July 11, 2017 16:17 — forked from carlcs/axios.js

	import qs from 'qs';
	import Axios from 'axios';

	Axios.defaults.baseURL = Craft.baseUrl;
	Axios.defaults.headers.common['Accept'] = 'application/json';
	Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
	Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

	Axios.interceptors.request.use(config => {
	if (config.data === Object(config.data)) {

alexcarpenter / img.html

Created December 9, 2016 20:00 — forked from brettburwell/img.html

Craft macro to centralize the markup and config for responsive images


	{# ================================================================== #}
	{# ================================================================== #}
	{# Responsive Images
	{# ================================================================== #}
	{# ================================================================== #}
	{#
	{% import '_macros/img' as macroImg %}
	Macro to centralize the markup and config for responsive images.

alexcarpenter / trunkdjs-a9f1f17.js

Last active October 17, 2016 23:51

	class Trunkd {
	constructor(container, options = {}) {
	this.container = container \|\| '.trunkd';
	this.options = {
	antecedent: options.antecedent \|\| 'Recommended by:',
	consequent: options.consequent \|\| 'others',
	seperator: options.seperator \|\| ','
	}

	const sum = arr => arr.reduce((a, b) => a + b);

alexcarpenter / functional-utils.js

Created October 5, 2016 20:43 — forked from bendc/functional-utils.js

A set of pure and immutable ES2015 functions aimed to make functional JavaScript more idiomatic.

	// array utils
	// =================================================================================================

	const combine = (...arrays) => [].concat(...arrays);

	const compact = arr => arr.filter(Boolean);

	const contains = (() => Array.prototype.includes
	? (arr, value) => arr.includes(value)
	: (arr, value) => arr.some(el => el === value)

alexcarpenter / sprite-macro.html

Created April 13, 2016 15:06

	{% macro sprite(id, viewBox, classes) %}
	{% set viewBox = viewBox or "0 0 1 1"%}
	<span class='sprite -{{id}} {{classes}}'>
	<svg viewBox="{{viewBox}}"><use xlink:href='images/icons.svg#{{id}}' /></use></svg>
	</span>
	{% endmacro %}

alexcarpenter / gist:32e9f4c1328e63bbe3dd

Created March 24, 2016 02:21

Sass depreciation warning

	// warning message is optional
	@mixin deprecated($item, $msg: null) {
	@if $msg { @warn "DEPRECATION WARNING: #{$item} -- #{$msg}"}
	@else { @warn "DEPRECATION WARNING: #{$item}" }
	}

	.button--login {
	@include deprecated(&, 'use "btn" prefix');
	color: blue;
	}

alexcarpenter / rsync

Created March 10, 2016 12:55

	# dry run
	rsync -navPhz source/folder/ destination/folder/

	# the real deal
	rsync -avPhz source/folder/ destination/folder/