惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

K
Kaspersky official blog
小众软件
小众软件
Engineering at Meta
Engineering at Meta
博客园 - 三生石上(FineUI控件)
WordPress大学
WordPress大学
G
Google Developers Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
V
V2EX
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Google DeepMind News
Google DeepMind News
Security Archives - TechRepublic
Security Archives - TechRepublic
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
C
Check Point Blog
aimingoo的专栏
aimingoo的专栏
罗磊的独立博客
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
MongoDB | Blog
MongoDB | Blog
L
LINUX DO - 热门话题
酷 壳 – CoolShell
酷 壳 – CoolShell
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
H
Help Net Security
Martin Fowler
Martin Fowler
G
GRAHAM CLULEY
Simon Willison's Weblog
Simon Willison's Weblog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - Franky
V
Vulnerabilities – Threatpost
云风的 BLOG
云风的 BLOG
博客园_首页
C
Cybersecurity and Infrastructure Security Agency CISA
量子位
Stack Overflow Blog
Stack Overflow Blog
Recent Announcements
Recent Announcements
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
I
Intezer
Scott Helme
Scott Helme
A
About on SuperTechFans
博客园 - 司徒正美
Hacker News: Ask HN
Hacker News: Ask HN
The GitHub Blog
The GitHub Blog
Forbes - Security
Forbes - Security
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
博客园 - 聂微东
人人都是产品经理
人人都是产品经理
The Cloudflare Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Spread Privacy
Spread Privacy
T
Tailwind CSS Blog
S
Security Affairs
宝玉的分享
宝玉的分享

remy sharp's l:inks

Deno Style Guide Easy 6502 by skilldrick Profiling React.js Performance BEM Naming Cheat Sheet by 9elements Visual 6502 Remix Elijah Manor (@elijahmanor) on X All – Tiny Helpers AST explorer Insecure How to Authenticate with Next.js and Auth0: A Guide for Every Deployment Model Revealed: quarter of all tweets about climate crisis produced by bots I Add 3-25 Seconds of Latency to Every Page I Visit GitHub - ericchiang/pup: Parsing HTML at the command line Browserling – Online cross-browser testing Error Handling with GraphQL and Apollo Schwerkraftprojektionsgerät How To Turn Off Catalina Update Notifications (Prompts & Badges) • macReports Maskable.app It’s 2020 and you’re in the future Emulators written in JavaScript | Frederic Cambus The Size of Space systemfontstack Programming Fonts - Test Drive Screen Size Map GitHub - Yonet/MixedRealityResources: Mixed Reality related resources The Lines of Code That Changed Everything Notes from the Internet Health Report 2019 CopyPalette Generative Artistry Profile a React App for Performance nanoSQL 2 Moving Your JavaScript Development To Bash On Windows — Smashing Magazine Startup Playbook How to Release a Custom React Component, Hook or Effect as an npm Package React Suite - Enterprise React UI Component Library Use VSCode Dimmer to Highlight Code when Teaching 3 simple rules for effectively handling dates and timezones Large collection of how to animate pixelart Accessible React component libraries mineral-ui.com Australian Government Design System Reakit – Toolkit for building accessible UIs Chakra UI Curl Cookbook The problem with tooltips and what to do instead GitHub - trimstray/the-book-of-secret-knowledge: A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools and more. It Form design: from zero to hero all in one blog post Brussels changes its mind AGAIN on .EU domains: Euro citizens in post-Brexit Britain can keep them after all Improve Your Email Campaigns with These Fantastic Tools Ethical Web Principles Old Typewriter Text Effect Bruce Lawson Google open sources standardized code in bid to become Mr Robots.txt Preferreds-color-scheme:你好,黑暗,我的老朋友  |  Articles  |  web.dev Free for Developers Startup idea checklist Developing a Robust Font Loading Strategy for CSS-Tricks—zachleat.com How I use Slack—alone—to get more done Upcoming proposals in JavaScript 🦄 VueJS is dead, long live VueJS! Bruce Lawson Answers for young people - Tim Berners-Lee Finally, an AI that can reliably catch and undo Photoshop airbrushing. Who made it? Er, Photoshop maker Adobe Qubyte Codes - How I schedule posts using GitHub Actions Games and Graphics in Popup URL bars Stack 58 bytes of css to look great nearly everywhere The reduce ({...spread}) anti-pattern - RichSnapp.com The Online Disassembler CSS Gradient – Generator, Maker, and Background Chrome DevTools  |  Chrome for Developers HB88 | Đăng Nhập HB88 Cá Cược Nhanh Chóng Không Bị Chăn #1 Introducing React Apollo 2.1 - Apollo GraphQL Blog Color Palettes Generator and Color Gradient Tool Clément Chastagnol ~ Moving efficiently in the CLI Testing Async Components · Issue #346 · enzymejs/enzyme Game Platforms recent news | Game Developer Professional Sound Effects - Royalty-Free SFX | Unlimited Downloads entr(1) Learn React From The Comfort Of Your Browser Axe Rules | Deque University Record and share your terminal sessions, the simple way Web Design Museum Powerful New Additions to the CSS Grid Inspector in Firefox Nightly – Mozilla Hacks - the Web developer blog Latency | Apex Software HackerNoon Signals and Sine Waves (Learn Web Audio from the Ground Up, Part 1) JavaScript Systems Music Vintage bits on cassettes Microsoft Design Legal Documents & Contract Templates | Simply Docs create-graphql-server — instantly scaffold a GraphQL server GraphQL and MongoDB — a quick example Using GraphQL with MongoDB Your First GraphQL Server Build a GraphQL server from scratch Practical Redux, Part 3: Project Planning and Setup 架构标记测试工具 | Google 搜索中心  |  Search Central  |  Google for Developers Freesound
JavaScript isn’t always available and it’s not the user’s fault
Adam Silver · 2019-11-05 · via remy sharp's l:inks

JavaScript isn’t always available and it’s not the user’s fault

There’s been some comments about this on Twitter.

You might have heard that the percentage of users without JavaScript is approximately 1% and that these people actively turn it off. And on that basis that it’s okay to exclude them.

First of all, 1% of a large number is still a large number. A 1% increase in users is not usually something to be sniffed at.

But more importantly, the problem is less about the 1% of users who always visit your site without JavaScript and more about the 1% of visits to your site which result in users experiencing your site without JavaScript. And through no fault of their own.

For Buzzfeed, for example, 1% of visits is actually 13 million requests per month.

Stuart Langridge visualises the difference between 1% of users not having JavaScript versus 1% of visits not having JavaScript in why availability matters.

Crucially, these users don’t turn off JavaScript nor are they using an old feature phone. They’re just like you and me.

Here I’ll jot down all of the reasons users experience sites as if they don’t have JavaScript and at the end I’ll explain what we can do about it.

1. The browser doesn’t recognise your JavaScript code

If your JavaScript file contains methods or properties the browser doesn’t understand, the script won’t run.

This happens a lot because every day new browsers come out and new websites are published which rely on new APIs and JavaScript frameworks that will only work in a narrow range of cutting edge browsers.

All it takes is for one method not to be recognised and users experience the site as if JavaScript is off.

2. Browser extensions can break JavaScript

Browser plugins use JavaScript to change and add functionality to web pages. But, this is at risk of breaking depending on how well the site’s JavaScript and the plugin’s JavaScript is written.

Specifically, if JavaScript is written without feature detection, it can cause the interface to break.

As a result, users get the ‘JavaScript off’ experience.

3. Some browsers turn off JavaScript on slow connections

Chrome on Android, for example, automatically turns off JavaScript on slow connections in order to speed up page load times.

Again, under these circumstance users get the ‘JavaScript off’ experience. So all the links you put inside a hamburger menu will be laid out somewhere (or not at all) depending on your implementation.

4. JavaScript might fail to download

Like any HTTP call, the request for your site’s JavaScript can fail to load. This can happen—and has happened to me—on a train because the connection stops before the script is downloaded.

Similarly, Content Delivery Networks (CDN) can go down, so even if your connection is stable, the server responsible for sending back JavaScript might not be.

DNS lookup failures can also prevent the script from being fetched at all.

Intermittent connection or intermittent server means: the user gets the ‘JavaScript off’ experience.

5. Third-party scripts can break JavaScript

Third-party scripts running on your page—analytics tools, for example—can conflict with your own JavaScript and cause it to fail.

This is similar to the browser extension problem, except the conflict is between scripts you’ve chosen to include yourself.

6. Corporate firewalls and mobile operators block JavaScript

Some corporate firewalls block or change JavaScript files before they are sent to the browser.

For example, Sky Broadband once accidentally blocked Jquery which caused lots of sites to break. And this is another one I’ve experienced myself—when I worked at T-Mobile they blocked certain scripts to improve performance.

Personal firewalls and antivirus software can do the same. And on unsecure connections, internet service providers have been known to inject their own code into pages, which can conflict with or break your JavaScript.

It’s not the users’ fault, but once again they are denied the use of JavaScript.

7. Some browsers don’t run JavaScript

Some browsers, such as Lynx, don’t run JavaScript. So if your site shows nothing without JavaScript, then that’s what users will get— nothing.

(And that’s just one of the problems that I noted in my discussion of single page applications.)

What to do about it

The more your site relies on JavaScript, the more fatal the experience is likely to be when JavaScript is unavailable.

So the first thing to do is follow Tim Berners-Lee’s rule of least power by doing as much work further down the stack as we can.

In other words, if you’re dealing with text, images, video and forms—which is most of us, most of the time—then render the HTML on the server. No JavaScript needed, more robust and more performant.

For the remaining enhancements that genuinely need JavaScript to work, use feature detection to stop browsers that aren’t able to apply the enhancement and therefore breaking the interface unnecessarily.

Summary

While some users actively turn off JavaScript, the vast majority of users experience an equivalent experience through no fault of their own.

It’s not a matter of if your users don’t have JavaScript—it’s a matter of when and how often.

The answer to that is around 1% of the time.

If you had an application bug which occurred 1% of the time, you’d fix it. No team I’ve come across would put up with that level of reliability.

The same goes for JavaScript. It’s not about people who turn it off. It’s about the nature of the web itself.

When it fails, it’s our job to make sure we don’t exclude users from accessing the products we make by designing resilient interfaces.

Thanks a lot to Caroline Jarrett for her feedback and suggestions.