Skip to content

Instantly share code, notes, and snippets.

View markmichon's full-sized avatar

Mark Michon markmichon

34 followers · 1 following
View GitHub Profile
@scottjehl
scottjehl / whichones.js
Created August 21, 2020 15:40
which elements are wider than the viewport?
var list = [];
document.querySelectorAll("body *")
.forEach(function(elem){
if(elem.getBoundingClientRect().width > document.body.getBoundingClientRect().width){
list.push(elem.outerHTML.split('>')[0] + '>');
}
});
confirm( "these elements are wider than the viewport:\n\n " + list.join("\n") )
@shelldandy
shelldandy / typekit.html
Last active April 27, 2018 15:25
Master Race Typekit Solution by Glen Maddern
<head>
<script>
if (window.localStorage && window.localStorage._tk_cache) {
document.documentElement.classList.add('wf-active');
var script = document.createElement('script');
script.innerHTML = localStorage._tk_cache + ";(function () {var timeout = setTimeout(function () {document.documentElement.classList.remove('wf-active');}, 300); Typekit.load({ async: false, active: function () { clearTimeout(timeout); }});})();";
document.head.appendChild(script);
}
window._tk_onload = function () {
var req = new XMLHttpRequest()
@zachleat
zachleat / rwdurl
Last active February 5, 2019 02:20
A command line utility to open a url with a bunch of different screen widths (and organize the windows).
# My Chrome developer profile is in the `Profile 1` directory, make sure to update with yours.
# Best on an ultra wide monitor.
function rwdurl() {
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(0,0);window.resizeTo(320,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(330,0);window.resizeTo(480,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(815,0);window.resizeTo(640,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(1460,0);window.resizeTo(800,1395);window.location='$1';</script></body></html>"
open -n
@craigeley
craigeley / sifttter.rb
Last active July 23, 2018 16:37
This script looks for text files in a specific folder that include completed tasks ('@done') and timestamps, and then collects them into a daily log for the Day One journaling application. It works especially well when it's connected to IFTTT. See more details at http://craigeley.com/tagged/sifttter
#!/usr/bin/ruby
# SIFTTTER 1.5: An IFTTT-to-Day One Logger by Craig Eley 2014 <http://craigeley.com>
# Based on tp-dailylog.rb by Brett Terpstra 2012 <http://brettterpstra.com>
# Multiple Date Function by Paul Hayes 2014 <http://paulrhayes.com>
#
# Notes:
# * Uses `mdfind` to locate a specific folder of IFTTT-generated text files changed in the last day
# * The location of your folder should be hardcoded in line 67, and the location of your Day One in line 66
# * Scans leading timestamps in each line matching the selected dates
# * Does not alter text files in any way
@bomberstudios
bomberstudios / sketch-plugins.md
Last active February 26, 2024 07:02
A list of Sketch plugins hosted at GitHub, in no particular order.
@SlexAxton
SlexAxton / .zshrc
Last active April 25, 2023 03:57
My gif workflow
gifify() {
if [[ -n "$1" ]]; then
if [[ $2 == '--good' ]]; then
ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
rm out-static*.png
else
ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif
fi
else
@bohman
bohman / viewport.js
Last active November 20, 2020 11:37
jQuery get viewport size
// -----------
// Debugger that shows view port size. Helps when making responsive designs.
// -----------
function showViewPortSize(display) {
if(display) {
var height = jQuery(window).height();
var width = jQuery(window).width();
jQuery('body').prepend('<div id="viewportsize" style="z-index:9999;position:fixed;top:40px;left:5px;color:#fff;background:#000;padding:10px">Height: '+height+'<br>Width: '+width+'</div>');
jQuery(window).resize(function() {