Skip to content

Instantly share code, notes, and snippets.

View fstorr's full-sized avatar

Francis Storr fstorr

7 followers · 2 following
View GitHub Profile
@fstorr
fstorr / Dynamically set the width of a select element based on its contents
Last active August 29, 2015 13:57
Occasionally there's a need to create a fancy-looking dropdown menu that involves showing and hiding all manner of things. This seems to mean the select element doesn't expand to the width of its content. This function loops through the option tags, finds the amount of letters in the longest one, grabs the document's font size, multiples those v…
function sizeSelects(){
var fs = window.getComputedStyle(document.querySelector("body"),null).getPropertyValue("font-size").slice(0,-2);
var selects = document.querySelectorAll("select");
for (var select = 0; select < selects.length; select++){
var opts = selects[select].querySelectorAll("option");
var len = 0;
var longest = 0;
@fstorr
fstorr / helpful-git-commands
Last active August 29, 2015 14:07
Helpful git commands
# Useful Git commands
## Config Options
git config --global user.name "First Last"
git config --global user.email "emailaddress"
git config user.email "emailaddress" : sets email address for a repo instead of globally
git config user.email : shows which email address it is using in the repo you're currently in
git config --global core.editor emacs : should you want to specifiy an editor for interactive commands See [associating text editors with Git](https://help.github.com/articles/associating-text-editors-with-git/) for more options
git config --global merge.tool opendiff : specify a merge tool (OSX only)
@fstorr
fstorr / word-cloud-prep
Created May 1, 2015 17:18
word cloud prep
1. Split each word onto it's on line (use text editor until bash command can be found)
2. Strip out things like speech marks, brackets, full stops, commas, slashes, dashes, etc
3. `awk '{print tolower($0)}' filename | sort > outputfilename`
@fstorr
fstorr / Useful regular expressions
Last active December 14, 2015 13:38
Make brain hurt fewer
** Look arounds **
Positive lookahead: q(?=u) // find q followed by u
Negative lookahead: q(?!u) // find q not followed by u
Positive lookbehind: (?<=a)b // find b preceeded by a. CANNOT BE VARIBLE LENGTH
Negative lookbehind: (?<!a)b // find b not preceeded by a. CANNOT BE VARIBLE LENGTH
** Atomic grouping **
@fstorr
fstorr / localStorage loop
Created March 12, 2013 19:41
loop through localStorage
for(var i = 0, len = localStorage.length; i < len; i++){
var key = localStorage.key(i);
var value = localStorage[key];
}
@fstorr
fstorr / Navigation list to dropdown
Created March 19, 2013 19:20
Turn a navigation list into a dropdown. Uses jQuery and the JavaScript matchMedia command, which is still fairly new and so currently relegates this to prototypes only.
if (matchMedia) {
var mq = window.matchMedia("(max-device-width:320px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
var $dropnav = $("<select id='respnav'></select>");
var $option = $("<option>Navigate to a section</option>").appendTo($dropnav);
@fstorr
fstorr / SASS px to em and em to px
Created April 17, 2013 18:22
SASS functions for px to em and em to px
$eminpx:14;
@function pxtoem($target, $context:$eminpx){
@return #{$target/$context}em;
}
@function emtopx($target, $context:$eminpx){
@return #{$target*$context}px;
}
@fstorr
fstorr / HTML5 download attribute
Last active December 16, 2015 21:09
Setting the HTML5 download attribute in capable browser. This assumes support for document.querySelector.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML download attribute</title>
</head>
<body>
<ul>
<li><a href="downloadable-file.txt">View your invoice</a></li>
<li class="download"><a href="downloadable-file.txt">Right-click and select Save to download your invoice</a></li>
@fstorr
fstorr / load jQuery remotely and fallback
Created November 13, 2013 18:18
Load jQuery from Google with a local fallback
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='URL'>\x3C/script>")</script>
@fstorr
fstorr / bookmarklet-for-breaking-images-to-check-for-visible-alt-text.md
Last active October 25, 2017 04:41
JavaScript bookmarklet that breaks images so you can check to see if there is visible alt text.

Bookmarklet For Breaking Images To Check For Visible Alt Text

I was carrying out an accessibility evaluation of a site and, by chance, none of the images loaded. I noticed that the images' alt attributes but they weren't showing.

It turned out that the developer had put font-size:0 on the containing <figure> element and then specified a new font-size on the <figcaption> element. I don't know why either.

As current accessibility testing tools don't currently test for this (which isn't suprising as it is something of an edge case), I wrote a bookmarklet to break all the images created with an element so that their alt text (if any) would show.

The bookmarklet works by replacing each image's URL with a new one.