Skip to content

Instantly share code, notes, and snippets.

@macgyver
macgyver / _css-vars.scss
Last active Jul 26, 2018
Sass utility functions for working with css variables
View _css-vars.scss
// n.b. assumes a code formatter (eg. Prettier) which enforces that css vars look exactly like `var(--x[, y])`
// var(--x) -> true
// var(--x, red) -> true
// red -> false
@function is-css-var($str-val) {
@return str-index($str-val, "var(--") == 1;
}
// var(--x, y) -> y
View components.cl-checkbox.js
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'label',
classNames: ['cl-checkbox']
});
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
actions: {
yo: function() {
this.set('yo', !this.get('yo'));
}
}
});
@macgyver
macgyver / components.form-thing.js
Last active Feb 6, 2017
submit button action fired when form is submitted
View components.form-thing.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
onSubmitForm: function(){
alert('you submitted form');
}
onClickButton: function(){
alert('you clicked button');
}
@macgyver
macgyver / wallpaper-find.sh
Created Jul 3, 2016
List all images large enough for use as a wallpaper
View wallpaper-find.sh
# first replace spaces in file names with underscores
find ~/Pictures/ -depth -name '* *' \
| while IFS= read -r f ; do mv -i "$f" "$(dirname "$f")/$(basename "$f"|tr ' ' _)" ; done
# then use graphicsmagick to print filenames of appropriate dimensions
gm identify -format "%w %h %f\n" ~/Pictures/*.jpg | awk '{if ($1 > 1024 && $2 > 768) print $3}'
@macgyver
macgyver / transitionAuto.coffee
Last active Aug 29, 2015
calculate and execute css transitions to/from automatically computed values
View transitionAuto.coffee
# requires: jQuery as $ and underscore as _, uses Modernizr if available
# normalized string for transitionEnd event name
transitionEnd = "webkitTransitionEnd oTransitionEnd transitionend"
# feature test for CSS transitions in the browser
hasTransitions = Modernizr?.csstransitions or ( ->
return _.some [
"transition",
"webkitTransition",
@macgyver
macgyver / responsive-background.less
Last active Jan 3, 2016
Less mixin to pivot between two background images based on device pixel density.Please provide feedback, I'm always interested in pontificating on how to format these disgusting media queries for readability!
View responsive-background.less
/* use the first form if the @2x image is the same url with "@2x" inserted before the extension */
.responsive-background(@url-1x, @background-size) {
@url-2x: ~`@{url-1x}.replace(/(\.[a-z0-9]{2,4})$/i, '@2x$1')`;
.responsive-background(@url-1x, @url-2x, @background-size);
}
/* use the second form to specify the url for the @2x image manually */
.responsive-background(@url-1x, @url-2x, @background-size) {
display: inline-block;
text-indent: -9999px;
View tmtheme-editor.herokuapp.com.js
(function(win, doc, $){
var next = function() {
var $next = $gallery.find('li.ng-scope.selected').next('li.ng-scope');
if ($next.length === 0) {
$next = $gallery.find('li.ng-scope').filter(':first');
}
@macgyver
macgyver / safe-console.js
Created Dec 29, 2011
make console.log safe
View safe-console.js
// Ensure that no stray console.log calls break functionality by defining an
// empty console object and log function in browsers where they do not exist.
if (typeof console == "undefined" || typeof console.log == "undefined") {
var console = { log: function() {} };
window.console = { log: function() {} };
}
@macgyver
macgyver / store.xkcd.js
Created Dec 14, 2011
A dotjs script to display comics near the "signed prints" select list at http://store.xkcd.com/
View store.xkcd.js
var select = $('select#SignedPrints'),
form = select.closest('form'),
dst = $('<img>').css({display:'block',margin:'0 auto 5px'});
form.before(dst);
select.bind('change', function(){
var option = $(this),
id = $(this).val().replace(/.*-0?(\d*)-.*/, '$1'),
uri = 'http://xkcd.com/' + id;
You can’t perform that action at this time.