Image by Susie Lu, take from the Addy Osmani's post
I believe it’s very important to understand how the software that users are working with actually functions. From a purely technical point of view, for the development team the clients are the browsers, and understanding how they read, interpret, and render our code is essential to provide the best possible experience for the users of the application or website.
| const ApiClient = require('@lhci/utils/src/api-client') | |
| const {findAuditDiffs} = require('@lhci/utils/src/audit-diff-finder') | |
| const client = new ApiClient({rootURL: 'http://lhci-server.example.com'}) | |
| const PROJECT_ID = '<UUID of project>' | |
| async function getLHR(hash, url) { | |
| const [build] = await client.getBuilds(PROJECT_ID, {hash}) | |
| const [run] = await client.getRuns(PROJECT_ID, build.id, {representative: true, url}) |
The web is the most important platform for individual empowerment and creative expression that mankind has ever invented. What was once a meager collection of a handful of scientific documents linked together, is now an expansive graph of billions of people interacting to exchange trillions of interconnected ideas. Getting to be even a small part of building that should be tremendously exciting.
But, even as great as it is, the web faces myriad existential threats. And it's up to us, the builders of the web, to confront them head on. Privacy, security, and accessibility are the obvious big ones, but less obvious are some far deeper problems at the core of the web and how we design/build it.
Should the web go all-HTTPS? Most think so, but uncacheable HTTPS alienates 1/3 of the world's population. We can all probably imagine how bad the web is on slow connections, or even how much it costs on expensive metered-data plans. But worse than slow connection is spotty/intermittent connection or
| /** | |
| * Use em or rem font-size in Bootstrap 3 | |
| */ | |
| @font-size-root: 14px; | |
| @font-unit: 0rem; // Pick em or rem here | |
| // Convert all variables to em |
| function Foo(who) { | |
| this.me = who; | |
| } | |
| Foo.prototype.identify = function() { | |
| return "I am " + this.me; | |
| }; | |
| function Bar(who) { | |
| Foo.call(this,"Bar:" + who); |
| // `Object.make(..)` is a helper/wrapper for `Object.create(..)`. Both create a new | |
| // object, and optionally link that new object's `[[Prototype]]` chain to another object. | |
| // | |
| // But `Object.make(..)` makes sure the new object always has a `__proto__` property | |
| // (even a null one) and delegation to a `isPrototypeOf(..)` method, both of which are | |
| // missing from the bare object (aka "Dictionary") created by `Object.create(null)`. | |
| // | |
| // `isPrototypeOf()` is put on a extra object that your created object can delegate to, | |
| // if any only if you create an empty object (by not passing a `linkTo`) that otherwise | |
| // wouldn't have access to `isPrototypeOf()`. |
| (function() { | |
| var script, | |
| scripts = document.getElementsByTagName('script')[0]; | |
| function load(url) { | |
| script = document.createElement('script'); | |
| script.async = true; | |
| script.src = url; | |
| scripts.parentNode.insertBefore(script, scripts); |
