Skip to content

Instantly share code, notes, and snippets.

😀
Coding things

Brett Jankord bjankord

😀
Coding things
Block or report user

Report or block bjankord

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View stylestats.md
View a11y-datepicker.md

Anyone know of a javascript date picker that is:

  • WCAG 2.0 compliant
  • Has Keyboard support
@bjankord
bjankord / githubcontributors.js
Created Nov 18, 2014
I found this plugin for displaying github contributors in a list using githubs API but couldn't find its original repo. Wanted to post this up cause I'm sure I'll be using this on some projects
View githubcontributors.js
/*
* Project: BrazilJS Projects - Github Contributors
* Description: List all contributors of some Github Repository
* Author: Zeno Rocha
* License: WTFPL
*/
;(function ( $, window, undefined ) {
View viewportwidth-shape.css
.shape {
background: #832333;
background: rgba(131,35,51,0.6);
}
@media screen and (min-width: 480px) {
.shape {
background: #81409f;
background: rgba(129,64,159,0.6);
}
@bjankord
bjankord / gist:2384682
Created Apr 14, 2012
Simple cross-browser debug function
View gist:2384682
function debug(text) {
((window.console && console.log) || (window.opera && opera.postError) || window.alert).call(this, text);
}
var test = "This is a test";
debug(test);
@bjankord
bjankord / gist:2509534
Created Apr 27, 2012
Picture element markup for high-resolution devices with polyfill markup for older browsers
View gist:2509534
<picture alt="Alt tag describing the image represented">
<!--<source src="photo-s.jpg"/>-->
<source src="photo-s.jpg"/>
<source src="photo-s@2x.jpg" media="-webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/>
<!--<source src="photo-m.jpg" media="min-width:321px"/>-->
<source src="photo-m.jpg" media="min-width:321px"/>
<source src="photo-m@2x.jpg" media="min-width:321px and -webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/>
<!--<source src="photo-l.jpg" media="min-width:641px"/>-->
<source src="photo-l.jpg" media="min-width:641px"/>
<source src="photo-l@2x.jpg" media="min-width:641px and -webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/>
@bjankord
bjankord / gist:2509672
Created Apr 27, 2012
Picture element with HTML media query variables
View gist:2509672
<head>
<mqs>
<var name=”s@2x” media=”-webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” />
<var name=”m” media=”min-width:321px” />
<var name=”m@2x” media=”min-width:321px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” />
<var name=”l” media=”min-width:641px” />
<var name=”l@2x” media=”min-width:641px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” />
<var name=”xl” media=”min-width:1281px” />
<var name=”xl@2x” media=”min-width:1281px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” />
</mqs>
@bjankord
bjankord / gist:2509735
Created Apr 27, 2012
Picture element with different image formats
View gist:2509735
<picture alt="Alt tag describing the image represented">
<source src="photo.webp" type="image/webp"/>
<source src="photo.mng" type="image/mng"/>
<source src="photo.svg" type="image/svg+xml"/>
<img src="photo-s.jpg" />
</picture>
// Notes
//----------------------------------------------------------------
If browser supported the webp image format it would use that image,
You can’t perform that action at this time.