Skip to content

Instantly share code, notes, and snippets.

👨‍💻
Making things to help others make things

David Darnes daviddarnes

👨‍💻
Making things to help others make things
Block or report user

Report or block daviddarnes

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View twitch-session-2019-08-14.js
/* eslint-env browser */
/* global jq: true */
const escaped = new Map([['<', '&lt;'], ['>', '&gt;']]);
const $$ = s => Array.from(document.querySelectorAll(s));
const $ = s => document.querySelector(s);
let jqLoaded = false;
const scrollPositions = [];
View conference-mc-tips.md

👀📎 It looks like you're preparing to MC a conference...

🚨 GIANT DISCLAIMER: This stuff is far from authoritative. But it's what I think works for me, and what I enjoy in an MC when I'm attending a conference.


Biggest tip - enjoy yourself.

@hankchizljaw
hankchizljaw / reset.css
Last active Apr 28, 2019
Minimal CSS reset
View reset.css
/* Box sizing rules */
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: inherit;
}
@bendc
bendc / simulate-typing.js
Created Sep 1, 2017
Fake typing animation
View simulate-typing.js
const trackTime = timing => {
const now = performance.now();
if (!timing.startTime) timing.startTime = now;
const elapsed = now - timing.startTime;
const {duration} = timing;
if (duration != null && duration <= elapsed) timing.startTime = null;
return elapsed;
};
const delay = (callback, duration) => {
View how-to-build-your-first-section-block-call-to-action.liquid
<hr>
<div id="section-cta">
<div class="section-header text-center">
<h3> {{ section.settings.text-box }} </h3>
</div>
{% for block in section.blocks %}
<div class="btn" id="call-to-action">
<a href="{{ block.settings.link }}" class="btn">{{ block.settings.linktext }}</a>
</div>
@bendc
bendc / randomInterval.js
Created Mar 9, 2017
rAF-based random interval
View randomInterval.js
const randomInterval = (() => {
const random = (min, max) => Math.random() * (max - min) + min;
return (callback, min, max) => {
const time = {
start: performance.now(),
total: random(min, max)
};
const tick = now => {
if (time.total <= now - time.start) {
time.start = now;
@drabbytux
drabbytux / make-image-change-variant-sections
Created Dec 10, 2016
make image change variant sections
View make-image-change-variant-sections
{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
var variantImages = {},
thumbnails,
variant,
variantImage,
optionValue,
@daviddarnes
daviddarnes / _config.yml
Last active Apr 7, 2016
Jekyll head meta
View _config.yml
# Permalinks
permalink: pretty
# Posts
excerpt_separator: <!-- more -->
# Site info
url: "https://darn.es"
title: "David Darnes"
description: "Web Designer & Front-end Developer"
@brendandawes
brendandawes / Dawesome Design Contract.md
Last active Apr 3, 2018
A contract for general design services.
View Dawesome Design Contract.md

This contract for general design sevices is a hybrid of this one on Docracy and the AIGA one also found on Docracy. I wanted something that was simple yet covered the important bits such as payment schedule, kill fee, liability, rights etc. Change the parts in square brackets to suit. I've had this checked by a lawyer but I recommend if you decide to use it you also get it looked at by a lawyer too. Never do work without a contract in place. The majority of clients are good, decent and want to create great work with you — having a solid contract in place will strengthen that relationship and provide you with protection should things go awry.

Agreement for commission of work between [Designer Name] (Designer)

and [Client Name] (Client)

on [Date]

@jazibobs
jazibobs / instagram-image-source.html
Last active Aug 1, 2017
Get a link to the image file from an instagram url
View instagram-image-source.html
<!--
Use a standard instagram url such as https://www.instagram.com/p/BB70H3bMEH-/
at the end of the link append media/?size=THE_IMAGE_SIZE_YOU_WANT
-->
<!-- Get the image file as a thumbnail -->
<img src="https://www.instagram.com/p/BB70H3bMEH-/media/?size=t" alt="Instagram Image Thumbnail">
<!-- Get the medium image file -->
<img src="https://www.instagram.com/p/BB70H3bMEH-/media/?size=m" alt="Instagram Image Medium">
You can’t perform that action at this time.