Skip to content

Instantly share code, notes, and snippets.

@13twelve
13twelve / responsiveImageSrcset.php
Created March 23, 2023 18:59
Create responsive image srcset attribute with PHP
<?php
function responsiveImageSrcset($url, $options = []) {
// Doc: https://github.com/area17/a17-behaviors/wiki/responsiveImageSrcset
if (!$url) {
return '';
}
$opts = [
'sizes' => [200,400,600,1000,1600,2200,2800],
@13twelve
13twelve / responsiveImageSizes.php
Last active March 23, 2023 18:18
Create responsive image sizes attribute with PHP
<?php
/**
* Generate responsive image sizes
* Takes a sizes object:
*
* responsiveImageSizes({
* "sm": "100vw",
* "md": 4,
* "lg": 7,
* "xl": "80%",
@13twelve
13twelve / responsiveImageSizes.js
Last active March 22, 2023 11:33
Create responsive image sizes attribute with JavaScript
const responsiveImageSizes = (sizes, feConfig = {}, relativeUnits = true) => {
if (!feConfig.structure || !feConfig.structure.columns || !feConfig.structure.container || !feConfig.structure.gutters || !feConfig.structure.gutters.inner) {
return '100vw';
}
// remSize - base for rem calcs
const remSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
const remCalc = (px) => `${ parseFloat(px) / remSize }rem`;
//
const getUnitValue = (val) => {
@13twelve
13twelve / getUnfuddleUsers.js
Created March 14, 2018 15:23
Make Unfuddle user list into a CSV
javascript:(function() {
var people = Unfuddle.Globals.people;
var str = 'Is Admin; Name; Email; Username; Projects\n';
function extractUserInfo(person){
if (!person.is_removed && person._displayName) {
str += person.is_administrator + '; ';
str += person._displayName + '; ';
str += person.email + '; ';
str += person.username + '; ';
.calendar {
@include font__ui;
}
.calendar__title {
display: block;
padding: 19px 45px;
font-weight: normal;
text-align: center;
}
@13twelve
13twelve / wyss_responsive_post_images.php
Created December 8, 2016 15:05
Wyss responsive post images
function wyss_responsive_post_images( $content ){
// unwrap images of links, except the one in the video embed
$content = preg_replace('/(?<!\<\/iframe>)<a.*?>(<img.*?>)<\/a>/', '$1', $content);
// wrap imgs in figures (if not in figures)
$content = preg_replace('/(\s|^)(<img.*?( class=[\'\"].*?[\"\']).*?>)(\s|$)/', '<figure$3>$2</figure>', $content);
// remove style from figure
$content = preg_replace('/(figure[^>]*) style=(\"|\')+[a-zA-Z0-9:;\.\s\(\)\-\,\#\_]*(\"|\')/', '$1', $content);
// remove ID from figures
$content = preg_replace('/(figure[^>]*) id=(\"|\')+[a-zA-Z0-9:;\.\s\(\)\-\,\#\_]*(\"|\')/', '$1', $content);
// unwrap <div class="entry-content-asset">
@13twelve
13twelve / head.js
Created October 26, 2016 16:29
head.js - to be inlined in the head of a document
// set up a master object
var A17 = window.A17 || {},
d = document,
de = d.documentElement,
w = window;
// test for HTML5 vs HTML4 support, cutting the mustard. Caution: IE9 will pass this..
A17.browserSpec = (typeof d.querySelectorAll && 'addEventListener' in w && A17.svgSupport) ? 'html5' : 'html4 ';
// test for SVG support
A17.svgSupport = d.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#BasicStructure', '1.1');
// test for touch support. Caution: this is dangerous: https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
@13twelve
13twelve / aliases.txt
Created August 26, 2016 15:41
Terminal aliases
alias hosts='subl /private/etc/hosts'
alias bash_profile="subl ~/.bash_profile"
alias gitconfig="subl ~/.gitconfig"
alias httpd.conf="subl /private/etc/apache2/httpd.conf"
alias phpini="subl /usr/local/etc/php/5.5/php.ini"
alias pingg='ping www.google.com'
alias ls="ls -G"
alias fuck="say fuck sake"
alias fans='top -o CPU -stats PID,COMMAND,CPU'
@13twelve
13twelve / .jshintrc
Created May 11, 2016 14:30
.jshintrc
{
// Predefined globals whom JSHint will ignore
"browser": true, // Standard browser globals e.g. 'window', 'document'
"globals": {
"min$": false,
"$": false,
"console":true,
"A17":true
},
// Development
@13twelve
13twelve / btn.scss
Created April 27, 2016 18:01
Mike SCSS grids
/* buttons should always be 4 columns wide, except on small when 100% */
.btn {
width: col-span(4,large);
@include breakpoint(medium) {
width: col-span(4,medium);
}
@include breakpoint(small) {
width: col-span(6,small); // equivilant to width: 100%;
}