The latest items from the weblog of Mathias Bynens
The 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.
This 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.
This 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.
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.
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!
ES2018 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.
This 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.
ES2015 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.
This article explains the effects of the new u flag for regular expressions in ES2015.
By 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.
It’s trivial to find colliding passwords when hashing with PBKDF2-HMAC-anything. This post explains why that is.
The 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.
Content 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.
If 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 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?
This post explains a hidden gem in the XMLHttpRequest standard that simplifies fetching and parsing JSON data through Ajax.
Looking 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.
Are 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.
Are 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.
Are the quotes in font-family: Comic Sans MS required, or not? If you thought the answer was yes, you may want to read on.
Fun 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…
Did 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.
When 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…
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.
I thought it would be fun to document the smallest possible valid HTML documents for each version, so here goes :)
Having recently written about character references in HTML, I figured it would be interesting to look into JavaScript character escapes as well.
As a follow-up to the post documenting a few popular HTML element + attribute notations, here’s a similar one about JavaScript.
In 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?
Recently, 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.
By 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!
This 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.
According 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?
HTML5 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.
“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!
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?
As 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 ( ) or the element.
Dropbox 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.
The following article was published on CSS-Tricks as a guest post.
Thomas Aylott has come up with a clever script that allows you to easily create Mac apps from shell scripts. Here’s how it works.
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.
The following article, written by John-David Dalton and yours truly, was published as part of the Performance Calendar series in 2010.
Every 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.
Yesterday, Mike Taylor raised a very interesting question on Twitter: “Anybody know what Safari 5 requires for a page to be Reader-ifiable?”
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.
One 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.
I 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.
One 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…
The HTML5 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 (yet)?
By 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.
When is it acceptable to use inline 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…
Showdown (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.