Skip to content

Instantly share code, notes, and snippets.

View jenstrickland's full-sized avatar

Jen Strickland jenstrickland

View GitHub Profile
@jenstrickland
jenstrickland / gist:0ba6c58703fc248cce6c
Last active August 29, 2015 14:16
HTML Base for a Best-Practices, Accessible Form
<form role="form"> <!-- if a search form make the role="search" -->
<label for="name">Name
<input type="text" id="name" name="name" size="27" class="required"/>
</label>
<label for="comments">Comments
<textarea name="comments" id="comments"></textarea>
</label>
<label for="robot_val">I am a *</label>
robot: <input type="radio" name="robot_val" value="robot" role="menuitemradio" checked="checked" />
human: <input type="radio" name="robot_val" value="human" role="menuitemradio" />
@jenstrickland
jenstrickland / gist:62263474ef66d3250f19
Created February 27, 2015 15:51
base for an HTML5 document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Title</title>
@jenstrickland
jenstrickland / gist:f887113566ede7a5aeeb
Last active January 19, 2022 23:57
HTML Base for an Accessible Table
<table role="table">
<caption>Your table heading</caption>
<thead role="rowgroup">
<tr role="row">
<th scope="col" role="columnheader">th content</th>
<th scope="colgroup" role="columnheader" colspan="3">th content</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row">
A couple of years ago, I collaborated with a team for a responsive redesign of Fidelity Investment's Retail Accounts & Trade pages. My efforts focused on a responsive solution for a massive data grid. The original solution used CSS only, resulted in a 75% increase in use of the page on mobile, and became the most viewed page on all of Fidelity.com. "Massive" is defined as thirteen or more columns, thousands of rows, plus an interactive drawer of additional information. This talk outlines brainstorming, iterating, and testing approaches for using HTML and CSS to more accurately address responsive solutions for design puzzles.
@jenstrickland
jenstrickland / gist:b7fec2994955c1664e6103a3871f5cc6
Created December 30, 2016 14:24
list of countries and country codes in options for use in select or datalist
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
layout title description author published categories
post
Text on Background Images
Guidelines for styling text over background images
Jen Strickland
false
accessibility, CSS, design - Category Name

Design Considerations for Text Over Background Images

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@jenstrickland
jenstrickland / add-branch-to-iterm-bash-profile
Created December 12, 2019 23:26
Add branch to iterm bash profile
parse_git_branch() {
git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}
export PS1="\u@\h \[\033[32m\]\w\[\033[33m\]\$(parse_git_branch)\[\033[00m\] $ "