| (function() { | |
| zalgo( document.documentElement ); | |
| function zalgo( node ) { | |
| for ( node = node.firstChild; node; node = node.nextSibling ) { | |
| if( node !== null && node.nodeType === 3 ) { | |
| getOffMyLawn( node ); | |
| } else { | |
| zalgo( node ); | |
| } |
| .widget { | |
| behavior: viewport; | |
| } | |
| .widget .dingus { | |
| background: #8a1e1b; | |
| } | |
| .widget:media(min-width: 30em) .dingus { | |
| background: #e20e03; | |
| } |
Polyfills don’t have “breaking changes” (or at least they shouldn’t), so I’m wondering what makes sense for major versions. “Whenever we do a lot of things” doesn’t seem particularly nailed-down, but I’m not sure there’s a better way.
One of the most common suggestions we’d heard from people joining the responsive images conversation was that we “just” need a new format—a single image that contains all the different sources we could possibly need.
To make this happen, we’d first need to invent a new format—well, not us, but one of the big browser vendors would have to fund and research it, with intent to give it away to all the other browsers for free. Then we’d need some new markup anyway, so we could tell the browser which source to load. Then, to handle transferring only parts of a single file, we’d need to tinker with the protocols that power the web.
Not the easiest thing to sell on a web standards mailing list.
It got us thinking, though: there was one problem with introducing a new format that we could solve. A new image format can’t have a fallback pattern in and of itself, and the best solutions we have for this all involve making a request for the file before determining whether we need to throw it away.
| // https://www.youtube.com/watch?v=b9N3tIlEJNc | |
| function normalize_headings( $content ) { | |
| // Move all headings below H2 down one notch | |
| $output = preg_replace( "/<(.*)h4(.*)>(.*)(<\/h2>)/", "<$1h5$2>$3</h5>", $content ); | |
| $output = preg_replace( "/<(.*)h3(.*)>(.*)(<\/h2>)/", "<$1h4$2>$3</h4>", $output ); | |
| // H1 and H2 both collapse to H3 | |
| $output = preg_replace( "/<(.*)h1(.*)>(.*)(<\/h1>)/", "<$1h3$2>$3</h3>", $output ); | |
| $output = preg_replace( "/<(.*)h2(.*)>(.*)(<\/h2>)/", "<$1h3$2>$3</h3>", $output ); |
| /* Column Styles */ | |
| .col { | |
| margin: 0 auto; | |
| clear: both; | |
| padding: 5.55555555% 3.7037037%; | |
| } | |
| .col-condensed { | |
| clear: both; | |
| padding: 7.4074074%; | |
| } |
| (function($){ | |
| $.fn.carousel = function(config) { | |
| var defaults = { | |
| slider: '.slider', | |
| slide: '.slide', | |
| prevSlide: '.prev', | |
| nextSlide: '.next', | |
| speed: 500 | |
| }, | |
| opt = $.extend(defaults, config); |
| { | |
| "images" : { | |
| "image1" : [ | |
| { | |
| "src" : "path/to/img1.png", | |
| "width" : "190px", | |
| "layer" : "3", | |
| "rotation": [ | |
| { | |
| "degrees" : -90, |
| /*/ | |
| alert("Commented out."); | |
| //*/ | |
| //*/ | |
| alert("Runs normally."); |
| // also handles swipeleft, swiperight | |
| $.event.special.swipe = { | |
| setup: function() { | |
| var thisObject = this, | |
| $this = $( thisObject ); | |
| $this | |
| .bind( touchStartEvent, function( event ) { | |
| var data = event.originalEvent.touches ? | |
| event.originalEvent.touches[ 0 ] : |