Skip to content

Instantly share code, notes, and snippets.

View alexcarpenter's full-sized avatar
:shipit:

Alex Carpenter alexcarpenter

:shipit:
276 followers · 318 following
View GitHub Profile
@alexcarpenter
alexcarpenter / float-labels.js
Created July 30, 2019 13:55
function valueCheckInit() {
var $text = $(".float-label input, .float-label select, .float-label textarea");
$text.each(function(){
var isSelect = $(this).is("select");
if ($(this).val() !== "" && !isSelect) {
$(this).attr("data-val", "true").siblings("label").addClass("float-auto");
} else if ($(this).val() !== null && isSelect) {
$(this).attr("data-val", "true").siblings("label").addClass("float-auto");
}
@alexcarpenter
alexcarpenter / LoadMore.vue
Created September 13, 2018 22:29
<template>
<div>
<article v-for="(post, index) in postsResults" :key="index">
<h2 class="card-title">
<a :href="post.uri">{{ post.title }}</a>
</h2>
<time>{{ post.dateCreated }}</time>
</article>
<button @click="fetchPosts()" :class="{ 'is-loading' : loading }" v-show="hasNextPage">Load More</button>
</div>
@alexcarpenter
alexcarpenter / _lazyFocusImager.twig
Created June 29, 2018 20:31 — forked from sjelfull/_lazyFocusImager.twig
Twig/Craft macro for lazy responsive images/bgimages with Imager and Focuspoint
{#
// lazyLoaded Image/bgImages, optimized with Imager and Focuspoint
---------------------------------------------------------------------------
https://nystudio107.com/blog/creating-optimized-images-in-craft-cms
https://github.com/aelvan/Imager-Craft
https://github.com/smcyr/Craft-FocusPoint
for the bgImage intrinsic ratio classname creation check:
https://github.com/inuitcss/inuitcss/blob/develop/objects/_objects.ratio.scss
@alexcarpenter
alexcarpenter / gist:c3d8a090836323c978c526048dbb0748
Last active May 25, 2018 12:45
Debug info
alexcarpenter.github.io git:master ❯ npm run debug ✹ ✭
> alexcarpenter-me@4.0.0 debug /Users/mighty/personal/alexcarpenter.github.io
> DEBUG=* npx eleventy --config=config/eleventy.config.js
Eleventy:UserConfig Resetting EleventyConfig to initial values. +0ms
Eleventy:Config Setting up global TemplateConfig. +0ms
Eleventy:UserConfig Adding universal filter 'slug' +169ms
Eleventy:UserConfig Adding universal filter 'url' +23ms
Eleventy:TemplateConfig rootConfig { templateFormats: [ 'liquid', 'ejs', 'md', 'hbs', 'mustache', 'haml', 'pug', 'njk', 'html', 'jstl' ], pathPrefix: '/', markdownTemplateEngine: 'liquid', htmlTemplateEngine: 'liquid', dataTemplateEngine: 'liquid', passthroughFileCopy: true, htmlOutputSuffix: '-o', keys: { package: 'pkg', layout: 'layout', permalink: 'permalink', permalinkRoot: 'permalinkBypassOutputDir', engineOverride: 'templateEngineOverride' }, dir: { input: '.', includes: '_includes', data: '_data', o
@alexcarpenter
alexcarpenter / carousel.js
Created April 25, 2018 12:11
Craft CMS carousel component
@alexcarpenter
alexcarpenter / devto.svg
Last active April 30, 2018 13:37
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@alexcarpenter
alexcarpenter / gulpfile.js
Created February 11, 2018 15:42
gulpfile.js
const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
const critical = require('critical');
const imagemin = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const changed = require('gulp-changed');
const plumber = require('gulp-plumber');
@alexcarpenter
alexcarpenter / gist:3a22519094f9a764b4d0986cb652da08
Created December 20, 2017 01:01
10 silly lifecycle alexcarpenter_me@1.0.0~start: Args: [ '-c', 'NODE_ENV=development gulp watch' ]
11 silly lifecycle alexcarpenter_me@1.0.0~start: Returned: code: 2 signal: null
12 info lifecycle alexcarpenter_me@1.0.0~start: Failed to exec start script
13 verbose stack Error: alexcarpenter_me@1.0.0 start: `NODE_ENV=development gulp watch`
13 verbose stack Exit status 2
13 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:280:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
@alexcarpenter
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
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;