Skip to content

Instantly share code, notes, and snippets.

@davidtheclark
davidtheclark / isElementInViewport.js
Created May 4, 2013 02:00
JavaScript: Is element in viewport?
/*
No jQuery necessary.
Thanks to Dan's StackOverflow answer for this:
http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
*/
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
@davidtheclark
davidtheclark / dumb_to_smart_quotes.py
Created May 5, 2013 17:10
Convert dumb quotes to smart quotes in Python
def dumb_to_smart_quotes(string):
"""Takes a string and returns it with dumb quotes, single and double,
replaced by smart quotes. Accounts for the possibility of HTML tags
within the string."""
# Find dumb double quotes coming directly after letters or punctuation,
# and replace them with right double quotes.
string = re.sub(r'([a-zA-Z0-9.,?!;:\'\"])"', r'\1”', string)
# Find any remaining dumb double quotes and replace them with
# left double quotes.
@davidtheclark
davidtheclark / snippet.cson
Last active January 31, 2019 01:01
Freemarker snippets for Atom Editor
# First install Freemarker language support with https://github.com/niltonheck/language-freemarker
'.text.html.ftl':
'Freemarker if':
'prefix': 'if'
'body': """
[#if ${1:condition}]
$2
[/#if]
"""
# For SCSS-Lint v0.31.0
linters:
BangFormat:
enabled: true
space_before_bang: true
space_after_bang: false
BorderZero:
// Simplest component: stateless function.
function Hello(props) {
return (
<div className="txt-bold">
Hello {props.name}
</div>
);
}
// Without JSX.
@davidtheclark
davidtheclark / output.scss
Last active July 6, 2017 17:04
A template for grunt-webfont that outputs a SCSS "icon" mixin. Also, adds a rule to hide text within a `<span>` inside the designated icon element -- for text describing the icon. (You know: accessibility, SEO, etc.) Below, `output.scss` is some example output, `scss-mixin-icon-template.css` is the template.
@font-face {
font-family:"icon";
src:url("../fonts/icon.eot");
src:url("../fonts/icon.eot?#iefix") format("embedded-opentype"),
url("../fonts/icon.woff") format("woff"),
url("../fonts/icon.ttf") format("truetype"),
url("../fonts/icon.svg?#webfont") format("svg");
font-weight:normal;
font-style:normal;
}
'use strict';
const mapnik = require('mapnik');
const VectorTile = require('vector-tile').VectorTile;
const Protobuf = require('pbf');
const fs = require('fs');
mapnik.register_default_input_plugins();
const geojson = fs.readFileSync('original-russian-triangle.geojson', 'utf8');
var VectorTile = require('vector-tile').VectorTile;
var Protobuf = require('pbf');
var fs = require('fs');
var path = require('path');
var data = fs.readFileSync(path.join(__dirname, './pbfs/river.vector.pbf'));
var tile = new VectorTile(new Protobuf(data));
var layer = tile.layers['russian-river'];
var mblConnect = {
$cont: $('#connect'),
$site: $('#site'),
isOpen: false,
$overlay: $('<div id="mbl-overlay" class="mbl-overlay js-connect-btn" />'),
_getBtns: function () {
return $('.js-connect-btn');
},
@davidtheclark
davidtheclark / gist:6366838
Created August 28, 2013 14:47
grunt-webfont SCSS template outputting classes that utilize an @extend placeholder, and accompanying demo HTML template.
/* Generated by grunt-webfont */
<% if (fontfaceStyles) { %>@font-face {
font-family:"<%= fontBaseName %>";<% if (eot) { %>
src:<%= fontSrc1 %>;<% }%>
src:<%= fontSrc2 %>;
font-weight:normal;
font-style:normal;
}
<% } %>