Basic Custom Control Requirements
> If you are working on a custom control, a complex widget, or a novel interface element to integrate into a project, library, or framework, there are some core features you need to build.
> These represent not just what works for users across the most contexts and preferences, but also what usability, accessibility, and internationalization practitioners (among many others) review to evaluate whether a solution can be used (purchased, integrated, discarded).
High-performance input handling on the web
> There is a class of UI performance problems that arise from the following situation: An input event is firing faster than the browser can paint frames.
> In a previous post, I discussed Lodash’s debounce and throttle functions, which I find very useful for these kinds of situations. Recently however, I found a pattern I like even better, so I want to discuss that here.
Follow up: https://nolanlawson.com/2019/08/14/browsers-input-events-and-frame-throttling/
The Mutable Web
> This is my question: why do we put up with websites that we don’t like looking at? I think most people would answer that question with another question: What choice do we have?
Scrolling the main document is better for performance, accessibility, and usability
> This subscroller fix may be obvious to more experienced web devs, but to me it was a bit surprising. From a design standpoint, the two options seemed roughly equivalent, and it didn’t occur to me that one or the other would have such a big impact, especially on mobile browsers. Given the difference in performance, accessibility, and usability though, I’ll definitely think harder in the future about exactly which element I want to be the scrollable one.
New Emails, Old Tech
> What makes an email different from a web page? Depending on how it’s presented, not a lot—but they also might be miles apart. Things that might have taken a few minutes to lay out for a website can take significantly longer to do when targeting an email client, and with a lot of pain in the middle. With that in mind, I felt like it was good to talk a little bit about the process that goes into email, and where it’s really falling short. Today’s Tedium is an email … about email. Particularly where it needs a little modernizing.
Provoking browser quirks with behavioural fuzzing
> The first bug I want to talk about is how to close a HTML comment in a different way. If you read the HTML specification you’ll know that you can close a comment with --> or --!> but what about another way? This is a great question to start off fuzzing with. You just then need to generate some code that answers that question.
Games and Graphics in Popup URL bars
> When I animated the URL bar with emojis I mentioned that I’d like to take it to the next level by putting a teeny game inside the URL bar. Well... Some really fine folks beat me to that. But I still wanted to give it a go ! I just needed to come up with something FRESH to work into it...
> So while thinking about how I could expand beyond the 1-dimensional movement of a URL bar, it came to me... Popups ! Yes, the bane of early 2000s internet will help me in 2019 achieve my emoji-url-bar-gaming dreams. By just opening a series of popups and overlapping them in a column we create a 2-dimensional display of sorts:
A new terminal-style line breaking with CSS Text
> I guess everybody knows the white-space CSS property, which allows web authors to control two main aspects of the rendering of a text line: collapsing and wrapping. A new value break-spaces has been added to the ones available for this property, which allows web authors to emulate a terminal-like line breaking behavior. This new value operates basically like pre-wrap, but with two key differences:
> any sequence of preserved white space characters takes up space, even at the end of the line.
> a preserved white space sequence can be wrapped at any character, moving the rest of the sequence, intact, to the line bellow.
This page is a truly naked, brutalist html quine
> Viewing the source of this page should reveal a page identical to the page you are now seeing. Nothing is hidden. It’s a true “What you see is what you get.”
Improving privacy and security on the web
Title is vague. Punch line:
> This change also has a significant security benefit for users, protecting cookies from cross-site injection and data disclosure attacks like Spectre and CSRF by default. We also announced our plan to eventually limit cross-site cookies to HTTPS connections, providing additional important privacy protections for our users.
XSS attacks on Googlebot allow search index manipulation
Re: What's Up Johnny? -- Covert Content Attacks on Email End-to-End Encryption
> We show practical attacks against OpenPGP and S/MIME encryption and digital signatures in the context of email. Instead of targeting the underlying cryptographic primitives, our attacks abuse legitimate features of the MIME standard and HTML, as supported by email clients, to deceive the user regarding the actual message content. We demonstrate how the attacker can unknowingly abuse the user as a decryption oracle by replying to an unsuspicious looking email. Using this technique, the plaintext of hundreds of encrypted emails can be leaked at once. Furthermore, we show how users could be tricked into signing arbitrary text by replying to emails containing CSS conditional rules. An evaluation shows that 17 out of 19 OpenPGP-capable email clients, as well as 21 out of 22 clients supporting S/MIME, are vulnerable to at least one attack. We provide different countermeasures and discuss their advantages and disadvantages.
Who has the fastest website in F1?
> So, I’m going to make my predictions the only way I know how: By comparing the performance of their websites. That’ll work right? If anything, it’ll be interesting to compare 10 sites that have been recently updated, perhaps even rebuilt, and see what the common issues are. I’ll also cover the tools and techniques I use to test web performance.
I Wanted to Type a Number
> This browser variability is particularly true with touch devices, especially in relation to the primary innovation of the touchscreen keyboard: its malleability, or adaptation its mode of input to best suit the context. For example, when a site specifies that the user should type a number, the browser can show a number-pad like keyboard (0 through 9) with extra large buttons for easier, faster, and more accurate numeric input. The usability difference between the small button and large button keyboards for numeric input is stark:
All you need to know about hyphenation in CSS
> There are two steps required to turn on automatic hyphenation.
Plus an additional 101 not fully supported prefixed properties.
XS-Searching Google’s bug tracker to find out vulnerable source code
> This article is a detailed explanation of how I could have exploited Google’s Monorail issue tracker to leak sensitive information (vulnerable source code files and line numbers) from private bug reports through a XS-Search attack.
WordPress 5.1 CSRF to Remote Code Execution
> An attacker can take over any WordPress site that has comments enabled by tricking an administrator of a target blog to visit a website set up by the attacker. As soon as the victim administrator visits the malicious website, a cross-site request forgery (CSRF) exploit is run against the target WordPress blog in the background, without the victim noticing. The CSRF exploit abuses multiple logic flaws and sanitization errors that when combined lead to Remote Code Execution and a full site takeover.
Why can’t I set the font size of a visited link?
> If getComputedStyle were to report 6px instead of 18px for visited links, I could have this page generate a link to pornhub.com, then test its font size, in order to reveal your browsing history. I could then serve you targeted ads, sell your data, blackmail you, et cetera. This security hole has been plugged by not allowing a:visited to set the font-size.