potch

UNIT = 'in';
// 100 units in an inch
SUBDIV = 100;

// material thickness
const U = 12.5;
// width of rack
const width = 1000;
// number of shelves

potch

<style>
  .post blockquote {
    border-left: .5em solid #eee;
    padding-left: 1.5em;
    margin-left: 0;
  }
</style>

potch

<p>Firefox 52 also includes a brand new JavaScript feature from ES2017: asynchronous functions and their companion, the <code>await</code> keyword. Async functions build on top of ES2015 Promises, allowing authors to write asynchronous sequences in a similar way to how they would write their synchronous equivalents.</p>

<p>Take the following example, which takes the result of one asynchronous request, modifies it, and passes it as the argument to a second asynchronous function. Here&#39;s how it would look with a traditional callback approach:</p>

<pre><code class="language-javascript">function doThings() {
  doThingA(function (err, result) {
    if (err) {
      handleError(err);
    } else {
      doThingB(result + 1, function (err, newResult) {

potch

The Road to Quantum Part 1: What are rendering engines?

If we’re going to start from somewhere, we should start from the beginning. A web browser is a piece of software that loads files (usually from a remote server) and displays them locally, allowing for user interaction.

Quantum is the codename for an project that we’ve undertaken at Mozilla to massively upgrade the part of Firefox that actually figures what do display to users based on those remote files[1]. The industry term for that part is “rendering engine”, and without one, you would just be reading code instead of actually seeing a website. Firefox’s rendering engine is called Gecko, and it’s been around for a pretty long while(replace this with how long).

It’s pretty easy for the most part to see the rendering engine as a single black box, sort of like a TV- data goes in, and the black box figures out what to display on the screen to represent that data. The question today is how? What are the steps to turning data into what users see?

The

potch

let index = ({title, name}) => `
  <h1>${title}</h1>
  ${name ? `
    <h2>Hello, ${name}.</h2>
  `:`
    <a href="#">Log in here</a>
  `}

  <div>footer</div>
`;

potch

function idle(action) {
  return new Promise((resolve, reject) => {
    requestIdleCallback(timing => resolve(action(timing)));
  });
}

async function init() {
  criticalPath();
  await idle(lessImportant);
  await idle(nonCritical);

potch

0322221fbd100f22ebac54c074208032fff017ebd8ddb7eb5f983ffee321fc4f40e6c9d3df2dfcde1aff7a9ee8bff51d01ffdf17f9b4eb40afd2ad413c36c005ffff00ffff0371a36854ddb1547e1cbf49c8eb7ba80a8f88dee26c823fa7800226c0001fbf929f8ff1bd1f83e8aed4df826bd5f8e01efd222a38184f8c0808df56219e2749646e87a1c680f172a9b26d48b79e448efd9076cf9bb3b982a3cc212122fd1700ff00ffa06ef7df20ff076f40131b3617e8801fe348bfc6e7ef7f08ed029af7a1415c82da343cfde418fa80bf97e8dfcfb740401fefe846be5e1ac7d7262b26fd955b87861edc66e040023968534bebdc7c17ff271c9f2b20206b7fba993b3c21b201dd5ff47f82c3413520fe74c0783f2fbf8a19019701d4131ff7f26a034026b30400ffff0300005b8f43bdc46083292a2e405a42ff40feef00f87ebc8f3d91ae0166a7012800b8bfb67bca1ca0fa3d35384d365d5cbbe0bc0c50e47453470cf97a230918c7ff7ff51d266ff30ef3b09ebf01ff8fb1fffb0e773841d8e0f343c21f1f1ffb2ac87f7fc555d0000323dc90a1c087cac82988259873be00d9d25075f110201fea5f34562f578331ffff1cbf407e202e4311ca9cea5b06f6248359d8e1b2302322f4b560f9a8f4001e8bb30079ff7fff004b7b871f2022fd08d8c8ca46accbdf12a306a79877bb9043a2faf2961e80af7fcfec8a6cfb

potch

Sparky- tiny unicode sparklines

Try them in a table!

product	price	trend
widgets	4.37	⠉⠉⢄⡠⠤⢄⣀⠤

potch

This might be cool

potch

.. image: http://unmaintained.tech/badge.svg
 :target: http://unmaintained.tech/
 :alt: No Maintenance Intended