Skip to content

Instantly share code, notes, and snippets.

@fstorr
fstorr / Accessible radio buttons with aria-labelledby
Last active January 10, 2022 11:48
How to make the question related to radio button answers accessible to screen reader users by using the aria-labelledby attribute.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible radio buttons using aria-labelledby</title>
</head>
<body>
<main role="main">
<h1>Accessible radio buttons using aria-labelledby</h1>
@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 / 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`