| // https://github.com/jonathantneal/closest/blob/master/src/index.js | |
| var ElementPrototype = window.Element.prototype; | |
| if (typeof ElementPrototype.matches !== 'function') { | |
| ElementPrototype.matches = ElementPrototype.msMatchesSelector || ElementPrototype.mozMatchesSelector || ElementPrototype.webkitMatchesSelector || function matches(selector) { | |
| var element = this; | |
| var elements = (element.document || element.ownerDocument).querySelectorAll(selector); | |
| var index = 0; | |
| while (elements[index] && elements[index] !== element) { | |
| ++index; | |
| } |
tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.
There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.
Here are official'ish documents to outline the developer community's desires.
| // Know how fast your HTML Imports are. | |
| // crbug.com/505279 - doesn't show sub-import resources. | |
| var imports = document.querySelectorAll('link[rel="import"]'); | |
| [].forEach.call(imports, function(link) { | |
| var entries = performance.getEntriesByName(link.href); | |
| console.info('=== HTML Imports perf ==='); | |
| entries.forEach(function(e) { | |
| console.log(e.name, 'took', e.duration, 'ms'); | |
| }); | |
| }); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body.loading #splash { | |
| opacity: 1; | |
| } | |
| #splash { | |
| position: absolute; | |
| top: 0; |
I've heard this before:
What I really get frustrated by is that I cannot wrap
console.*and preserve line numbers
We enabled this in Chrome DevTools via blackboxing a bit ago.
If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.
| var webviewProvider = (function() { | |
| if (/\/FBIOS/i.test(navigator.userAgent) === true) { | |
| return 'facebook'; | |
| } | |
| if (/Twitter for/i.test(navigator.userAgent) === true) { | |
| return 'twitter'; | |
| } | |
| if (/Pinterest\//.test(navigator.userAgent) === true) { | |
| return 'pinterest'; | |
| } |
| import Foundation | |
| struct Regex { | |
| var pattern: String { | |
| didSet { | |
| updateRegex() | |
| } | |
| } | |
| var expressionOptions: NSRegularExpressionOptions { | |
| didSet { |
| // Requires Bourbon | |
| @import "bourbon/bourbon"; | |
| // Use CSS gradient and text shadow to create line that breaks for descenders | |
| // Inspired by https://medium.com/designing-medium/7c03a9274f9 | |
| @mixin fancyUnderline( $color: currentColor, $bgcolor: #fff ) { | |
| @include background-image( linear-gradient( to bottom, $bgcolor 50%, $color 50% ) ); | |
| background-position: 0 89%; | |
| background-repeat: repeat-x; | |
| background-size: 1px 1px; |
| // Setup Google Analytics, but not if user has specified that they don't want to be tracked. | |
| (function (dnt, cookieDomain) { | |
| var scriptTag, hostRe = new RegExp(cookieDomain.replace(".", "\\.") + "$"); | |
| if (dnt !== "yes" && dnt !== "1") { | |
| window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date; | |
| ga('create', 'YOUR-ID-HERE', hostRe.test(location.host) ? cookieDomain : "auto"); | |
| ga(function (tracker) { | |
| tracker.set("appName", "Your app name here"); | |
| tracker.send('pageview'); | |
| }); |
| (function($) { | |
| $('a[href*=#]:not([href=#])').click(function() | |
| { | |
| if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') | |
| || location.hostname == this.hostname) | |
| { | |
| var target = $(this.hash), | |
| headerHeight = $(".primary-header").height() + 5; // Get fixed header height | |
