Mathias BynensThe latest items from the weblog of Mathias BynensQMS2022-08-10T12:55:15Ztag:mathiasbynens.be,2003:/blogA horrifying `globalThis` polyfill in universal JavaScriptThe globalThis proposal introduces a unified mechanism to access the so-called “global object” a.k.a. “the global” in any JavaScript environment. It sounds like a simple thing to polyfill, but it turns out it’s pretty hard to get right.tag:mathiasbynens.be,2019-04-18:/notes/globalthisMathias2019-04-15T14:40:02Z2022-08-10T12:55:15ZJavaScript engine fundamentals: optimizing prototypesThis article explains JavaScript engine optimization pipeline trade-offs, and describes how engines such as V8 speed up accesses to prototype properties. As a JavaScript developer, having a deeper understanding of how JavaScript engines work helps you reason about the performance characteristics of your code.tag:mathiasbynens.be,2018-08-16:/notes/prototypesMathias2018-08-16T10:35:56Z2021-06-25T12:43:43ZJavaScript engine fundamentals: Shapes and Inline CachesThis article describes some key fundamentals that are common to all JavaScript engines — and not just V8, the engine the authors work on. As a JavaScript developer, having a deeper understanding of how JavaScript engines work helps you reason about the performance characteristics of your code.tag:mathiasbynens.be,2018-06-14:/notes/shapes-icsMathias2018-06-06T12:57:44Z2018-09-03T11:12:49ZAsynchronous stack traces: why `await` beats `Promise#then()`Compared to using promises directly, not only can async and await make code more readable for developers — they enable some interesting optimizations in JavaScript engines, too! This write-up is about one such optimization involving stack traces for asynchronous code.tag:mathiasbynens.be,2017-10-02:/notes/async-stack-tracesMathias2017-09-12T15:29:55Z2019-04-12T09:36:59ZECMAScript regular expressions are getting better!This article highlights what’s happening in the world of JavaScript regular expressions right now. Spoiler: it’s quite a lot — there are more RegExp-related proposals currently advancing through the TC39 standardization process than there have been updates to RegExp in the history of ECMAScript!tag:mathiasbynens.be,2017-01-25:/notes/es-regexp-proposalsMathias2017-01-25T11:01:45Z2022-05-31T10:02:29ZUnicode property escapes in JavaScript regular expressionsES2018 adds support for Unicode property escapes of the form \p{…} and \P{…} to JavaScript regular expressions. This article explains what Unicode property escapes are, how they work, and why they’re useful.tag:mathiasbynens.be,2016-07-27:/notes/es-unicode-property-escapesMathias2016-06-12T11:53:47Z2022-05-31T09:39:31ZES2015 `const` is not about immutabilityThis seems to be a very common misconception that just won’t die. I keep running into it in blog posts, Twitter discussions, and even books.tag:mathiasbynens.be,2016-02-04:/notes/es6-constMathias2016-02-04T13:41:38Z2018-03-03T18:03:32ZValid JavaScript variable names in ES2015ES2015 updates the grammar for identifiers. This affects a number of things, but most importantly, identifiers can be used as variable names, and identifier names are valid unquoted property names. This post describes the observable changes compared to the old ES5 behavior.tag:mathiasbynens.be,2015-03-04:/notes/javascript-identifiers-es6Mathias2015-03-03T19:07:48Z2020-03-13T14:55:03ZUnicode-aware regular expressions in ES2015This article explains the effects of the new u flag for regular expressions in ES2015.tag:mathiasbynens.be,2014-08-26:/notes/es6-unicode-regexMathias2014-08-26T16:51:35Z2020-06-30T14:06:57ZDear Google, please fix plain text emails in GmailBy default, composing a new email in Gmail results in an HTML email under the hood. It’s possible to opt-out of that and use plain text email instead, but that leads to some problems.tag:mathiasbynens.be,2014-07-04:/notes/gmail-plain-textMathias2014-07-04T08:58:33Z2015-03-07T15:09:07ZPBKDF2+HMAC hash collisions explainedIt’s trivial to find colliding passwords when hashing with PBKDF2-HMAC-anything. This post explains why that is.tag:mathiasbynens.be,2014-03-25:/notes/pbkdf2-hmacMathias2014-03-21T08:47:42Z2018-03-03T17:37:51ZJavaScript has a Unicode problemThe way JavaScript handles Unicode is… surprising, to say the least. This write-up explains the pain points associated with Unicode in JavaScript, provides solutions for common problems, and explains how the ECMAScript 6 standard improves the situation.tag:mathiasbynens.be,2013-10-20:/notes/javascript-unicodeMathias2013-10-18T00:39:57Z2021-12-16T08:17:04ZProcessing Content Security Policy violation reportsContent Security Policy can be used to generate reports describing attempts to attack your site. This post briefly explains how this works, and presents a simple example script that can be used to process these reports.tag:mathiasbynens.be,2013-09-19:/notes/csp-reportsMathias2013-09-19T13:18:34Z2016-04-18T11:18:24ZHiding JSON-formatted data in the DOM with CSP enabledIf Content Security Policy is enabled for protection against cross-site scripting attacks (i.e. the unsafe-inline option is not set), the use of inline <script>s is not allowed. In that case, how can we pass server-generated data to the front-end without negatively affecting load time and run-time performance?tag:mathiasbynens.be,2013-08-27:/notes/json-dom-cspMathias2013-08-26T16:32:01Z2016-10-15T07:30:41ZLoading JSON-formatted data with Ajax and `xhr.responseType='json'`This post explains a hidden gem in the XMLHttpRequest standard that simplifies fetching and parsing JSON data through Ajax.tag:mathiasbynens.be,2013-07-24:/notes/xhr-responsetype-jsonMathias2013-07-23T23:14:15Z2016-09-01T22:18:25ZReserved keywords in JavaScriptLooking for a list of all reserved words in JavaScript? You’ve come to the right place. I recently needed such a list myself, but ended up comparing the reserved keywords in all ECMAScript versions as well. The result is listed below, for future reference.tag:mathiasbynens.be,2013-06-12:/notes/reserved-keywordsMathias2013-06-12T19:46:35Z2019-10-22T08:40:59ZHow to support full Unicode in MySQL databasesAre you using MySQL’s utf8 charset in your databases? In this write-up I’ll explain why you should switch to utf8mb4 instead, and how to do it.tag:mathiasbynens.be,2012-07-30:/notes/mysql-utf8mb4Mathias2012-07-28T15:16:16Z2019-03-13T13:56:40ZHow to speedrun Dropbox’s Dropquest 2012Are you a Dropbox user? By completing this year’s Dropquest, you can get 1 GB of extra Dropbox storage space, for free. Here’s how to do that as fast as possible.tag:mathiasbynens.be,2012-05-14:/notes/dropquest-2012Mathias2012-05-14T16:21:29Z2016-01-18T15:13:18ZUnquoted font family names in CSSAre the quotes in font-family: 'Comic Sans MS' required, or not? If you thought the answer was yes, you may want to read on.tag:mathiasbynens.be,2012-04-03:/notes/unquoted-font-familyMathias2012-03-27T17:38:34Z2022-10-07T12:49:54ZUnquoted property names / object keys in JavaScriptFun fact: var foo = { H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜: 42 }; is valid JavaScript. It may not be immediately obvious, but the real surprise here is that the Cthulhu-esque property name is not surrounded by quotes. Intrigued by this, and having written about the similar topic of JavaScript identifiers before, I decided to look into valid property names in JavaScript. When do they need to be quoted? When can the quotes be omitted? And in which cases can dot notation be used instead of bracket notation to get or set a property based on its name?tag:mathiasbynens.be,2012-03-05:/notes/javascript-propertiesMathias2012-02-29T21:17:54Z2015-03-07T12:50:09ZValid JavaScript variable names in ES5Did you know var π = Math.PI; is syntactically valid JavaScript? I thought this was pretty cool, so I decided to look into which Unicode glyphs are allowed in JavaScript variable names, or identifiers as the ECMAScript specification calls them.tag:mathiasbynens.be,2012-02-21:/notes/javascript-identifiersMathias2012-02-17T15:19:15Z2019-06-12T13:14:45ZJavaScript’s internal character encoding: UCS-2 or UTF-16?Does JavaScript use UCS-2 or UTF-16 encoding? Since I couldn’t find a definitive answer to this question anywhere, I decided to look into it. The answer depends on what you’re referring to: the JavaScript engine, or JavaScript at the language level.tag:mathiasbynens.be,2012-01-20:/notes/javascript-encodingMathias2012-01-17T22:18:54Z2015-09-14T08:07:30ZJavaScript character escape sequencesHaving recently written about character references in HTML, I figured it would be interesting to look into JavaScript character escapes as well.tag:mathiasbynens.be,2011-12-21:/notes/javascript-escapesMathias2011-11-29T15:24:30Z2017-02-01T14:32:34ZThe smallest possible valid (X)HTML documentsI thought it would be fun to document the smallest possible valid HTML documents for each version, so here goes :)tag:mathiasbynens.be,2011-12-15:/notes/minimal-htmlMathias2011-12-15T13:35:06Z2020-04-25T13:20:30ZAmbiguous ampersandsIn this post, we’ll take a closer look at what happens if there’s an unencoded ampersand that’s not part of a character reference in your HTML code. Is it valid? Is it invalid? And what do “ambiguous ampersands” have to do with all this?tag:mathiasbynens.be,2011-11-23:/notes/ambiguous-ampersandsMathias2011-08-07T12:22:30Z2016-10-05T17:30:11ZJavaScript `foo.prototype.bar` notationAs a follow-up to the post documenting a few popular HTML element + attribute notations, here’s a similar one about JavaScript.tag:mathiasbynens.be,2011-08-12:/notes/javascript-prototype-notationMathias2011-08-12T10:56:54Z2016-03-16T17:07:37ZHTML element + attribute notationRecently, a popular new addition was made to the HTML spec: anchors may now have a download attribute. That’s not what this post is about though — instead, I’d like to go over some of the different notations people used to refer to this new element + attribute combo in tweets and blog posts.tag:mathiasbynens.be,2011-08-04:/notes/element-attribute-notationMathias2011-08-04T15:09:09Z2011-08-12T10:54:57ZHow I detect and use `localStorage`: a simple JavaScript patternBy now, everyone knows how to detect and use localStorage. However, I’ve been using a seemingly unconventional (but slightly more efficient) technique to do so. Since I haven’t seen it documented anywhere else, here goes!tag:mathiasbynens.be,2011-07-29:/notes/localstorage-patternMathias2011-07-29T15:09:40Z2014-08-28T15:47:59ZThe end-tag open (ETAGO) delimiterAccording to HTML4, the first occurrence of the character sequence </ (ETAGO or end-tag open delimiter) is treated as terminating the end of the containing element’s content. This has since been changed in the HTML5 spec. What do browsers implement? How can we make sure the code we write doesn’t break because of this?tag:mathiasbynens.be,2011-06-27:/notes/etagoMathias2011-06-10T10:45:14Z2016-09-29T13:11:19ZUnquoted attribute values in HTML and CSS/JS selectorsThis is one of those posts I wrote just to be able to link back to it later. I see a lot of questions on the subject, and even though I don’t mind explaining the same thing over and over again, it’s probably easier to just write it down once.tag:mathiasbynens.be,2011-06-13:/notes/unquoted-attribute-valuesMathias2011-06-13T10:22:53Z2019-04-20T12:56:08ZIn defense of CSS hacks — introducing “safe CSS hacks”I am writing this article because I noticed there’s a lot of misunderstanding on the subject of CSS hacks. How do you target Internet Explorer in your CSS? Do you use CSS hacks, conditional stylesheets or something else?tag:mathiasbynens.be,2011-05-19:/notes/safe-css-hacksMathias2011-02-21T13:54:00Z2014-02-17T10:56:41ZUsing the `oninput` event handler with `onkeyup`/`onkeydown` as its fallbackHTML5 standardizes the oninput event handler, which should be used to detect user input in JavaScript. Sure, you could use onkeydown or onkeyup instead, but those were never really designed for this particular use case, and it shows.tag:mathiasbynens.be,2011-05-11:/notes/oninputMathias2011-05-11T09:31:52Z2015-10-28T15:19:16ZEverything you always wanted to know about touch icons“Touch icons” are the favicons of mobile devices and tablets. Adding them to your web page is relatively easy, but it gets more complicated as you target different devices and firmware versions. Let’s dive in!tag:mathiasbynens.be,2011-03-02:/notes/touch-iconsMathias2011-03-02T08:09:06Z2014-09-18T16:27:25ZAirPlay video support in iOS Safari — a bookmarkletAs you may have heard, the upcoming iOS 4.3 will support AirPlay streaming in Mobile Safari. Previously video streaming was only available in Apple-controlled iOS applications like the YouTube and iPod/Video apps, but the new iOS 4.3 beta opens up AirPlay support to both third party App Store applications, as well as embedded web videos using either the Quicktime plugin (<embed>) or the <video> element.tag:mathiasbynens.be,2011-02-03:/notes/ios-airplay-bookmarkletMathias2011-02-03T11:23:40Z2014-02-17T10:52:16ZCompleting Dropbox’s Dropquest 2011 in 60 secondsDropbox organized a scavenger hunt named Dropquest the other day. The first 81 people to complete all steps won some nice prizes, but everyone participating in the quest can get 1 GB of extra Dropbox storage space.tag:mathiasbynens.be,2011-01-16:/notes/dropquest-2011Mathias2011-01-16T17:13:31Z2012-05-15T08:29:43ZBulletproof JavaScript benchmarksThe following article, written by John-David Dalton and yours truly, was published as part of the Performance Calendar series in 2010.tag:mathiasbynens.be,2010-12-23:/notes/javascript-benchmarkingMathias2010-08-02T11:15:24Z2013-07-13T22:01:35ZUsing CSS without HTMLThe following article was published on CSS-Tricks as a guest post.tag:mathiasbynens.be,2010-12-14:/notes/css-without-htmlMathias2010-12-14T15:13:38Z2015-03-07T13:47:40ZHow to create simple Mac apps from shell scriptsThomas Aylott has come up with a clever script that allows you to easily create Mac apps from shell scripts. Here’s how it works.tag:mathiasbynens.be,2010-11-12:/notes/shell-script-mac-appsMathias2010-11-12T12:51:46Z2015-03-07T15:58:22ZUsing `setTimeout` to speed up `window.onload`A few days ago, Martín Borthiry contacted me with a question. He had been using the optimized asynchronous Google Analytics snippet for a while, and noticed an additional speed gain when wrapping it inside a setTimeout() with a delay of 0 milliseconds. His tests made it pretty clear that this technique was indeed slightly faster, but Martín had no clue why.tag:mathiasbynens.be,2010-09-14:/notes/settimeout-onloadMathias2010-09-08T12:08:56Z2015-03-07T15:59:30ZCSS character escape sequencesWhen writing CSS for markup with weird class or id attribute values, you need to consider some rules. For example, you can’t just use ## { color: #f00; } to target the element with id="#". Instead, you’ll have to escape the weird characters (in this case, the second #). Doing so will cancel the meaning of special CSS characters and allows you to refer to characters you cannot easily type out, like crazy Unicode symbols.tag:mathiasbynens.be,2010-07-12:/notes/css-escapesMathias2012-01-24T11:57:08Z2022-03-28T14:01:09ZThe `id` attribute got more `class`y in HTML5One of the more subtle yet awesome changes that HTML5 brings, applies to the id attribute. I already tweeted about this a few months ago, but I think this is interesting enough to write about in more than 140 characters.tag:mathiasbynens.be,2010-07-11:/notes/html5-id-classMathias2010-06-06T17:38:38Z2015-02-06T15:54:17ZThe XML serialization of HTML5, aka ‘XHTML5’A while ago, I was wondering how exactly one triggers HTML5’s XML mode — let’s call it XHTML5 from now on. You know, just out of curiosity. I’ll always prefer HTML over XHTML because it’s much less verbose and I like to keep things simple.tag:mathiasbynens.be,2010-06-17:/notes/xhtml5Mathias2010-06-07T10:24:25Z2018-03-26T19:24:30ZThoughts on Safari Reader’s generated HTMLEvery time you click that shiny little Reader button, Safari generates an HTML document and displays it as an overlay to the original document. Let’s have a look at the HTML and CSS used in this process, and find out how we can mess with it.tag:mathiasbynens.be,2010-06-13:/notes/safari-reader-htmlMathias2010-06-13T17:30:50Z2012-02-22T17:26:07ZHow to enable Safari Reader on your site?Yesterday, Mike Taylor raised a very interesting question on Twitter: “Anybody know what Safari 5 requires for a page to be Reader-ifiable?”tag:mathiasbynens.be,2010-06-10:/notes/safari-readerMathias2010-06-10T10:03:25Z2012-02-22T17:26:19ZThe three levels of HTML5 usageI was asked to give an introductory talk on HTML5 for the latest Adobe User Group Belgium Web SIG Event. The presentation I ended up with is entitled “HTML5: It goes to ELEVEN” and can be viewed on Slideshare. In this article, I’ll try to write down some of the things I talked about.tag:mathiasbynens.be,2010-06-06:/notes/html5-levelsMathias2010-05-28T11:45:27Z2019-02-22T14:34:36ZThe HTML5 `document.head` DOM tree accessorOne of the lesser known HTML5 JavaScript goodies is the document.head DOM tree accessor, which is a more efficient (and easier to type) alternative to document.getElementsByTagName('head')[0]. Native support for document.head is very easy to detect…tag:mathiasbynens.be,2010-05-04:/notes/document-headMathias2010-05-04T21:02:07Z2011-10-13T16:06:53ZUsing Showdown/PageDown with and without jQueryShowdown (also known as PageDown) is a JavaScript parser for Markdown-formatted text. It’s used on this site to generate a formatted preview of your comment as you type it. Showdown is library-agnostic, but fortunately, using it with jQuery isn’t much of a problem.tag:mathiasbynens.be,2010-05-02:/notes/showdown-javascript-jqueryMathias2010-03-31T23:03:31Z2012-08-10T08:41:52ZBulletproof HTML5 `<details>` fallback using jQueryThe HTML5 <details> element is currently not natively supported in any browser natively supported in Chrome 12 and up. This makes it a little hard to guess how exactly this new element will behave, but reading the spec gives us a pretty good idea. While we wait for browsers to implement it, how about we create a fallback/polyfill for browsers who don’t understand <details> (yet)?tag:mathiasbynens.be,2010-04-25:/notes/html5-details-jqueryMathias2010-04-18T15:39:49Z2021-04-03T08:26:07ZDisplaying hidden elements like `<head>` using CSSBy default, only the html and the body element (plus its children) of a web page are actually rendered. All information within the head element might be parsed and used by the browser, but most of the time it doesn’t get displayed. If you want to, you can use CSS to display these ‘hidden’ elements.tag:mathiasbynens.be,2010-04-20:/notes/css-hidden-elementsMathias2010-04-17T22:14:33Z2022-10-30T21:08:45ZInline `<script>` and `<style>` vs. external `.js` and `.css` — what’s the size threshold?When is it acceptable to use inline <script> elements? When is it better to use separate .js files? The same question can be asked about inline vs. linked CSS — where do you draw the line?
I had been pondering about this for a while, but while writing my post about optimizing the asynchronous Google Analytics snippet I was reminded I didn’t have a solid answer to my question yet. Is it worth it to separate the Analytics snippet into a separate .js file, so it can be cached? Or would that be a bad idea, considering the additional HTTP request needed to retrieve just a few hundred bytes of data?
Obviously, I wasn’t gonna figure it out by myself. So I decided to ask Kyle Simpson, creator of LABjs; and Billy Hoffman, of Zoompf fame. (Thanks, guys!)tag:mathiasbynens.be,2010-04-16:/notes/inline-vs-separate-fileMathias2010-04-10T20:44:59Z2011-12-04T10:46:58Z