Take these two DOMs:
<div id="vue">
<custom-component>
<div>
<p>Here's a static output of how the custom component would render></p>
</div>
</custom-component>
<html> | |
<head> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" /> | |
</head> | |
<body> | |
<div class="wrap"> | |
<input inputmode="decimal" type="number" maxlength="1" /> | |
<input inputmode="decimal" type="number" maxlength="1" /> |
const promises: Record<string, Promise<void>> = {}; | |
/** | |
* Serializes a series of promise-returning function calls to ensure they | |
* occur linearly (as FIFO) rather than concurrently. To group calls that | |
* are to be serialized together, send a matching key. | |
*/ | |
export async function serialize(key: string, callback: () => Promise<void>) { | |
if (promises[key]) { | |
await promises[key]; |
<div class="has-children"> | |
<div class="ten"> | |
10% | |
</div> | |
<div class="twenty"> | |
20% | |
</div> | |
<div class="thirty"> |
const minimumUniverse = (knownPercent) => { | |
knownPercent = parseInt(knownPercent); | |
if (!(knownPercent > 0 && knownPercent < 100)) { | |
return 'Please enter a number between 0 and 100'; | |
} | |
for (let i = 1; i < 100; i++) { | |
for (let j = i + 1; j <= 100; j++) { | |
const currentPercent = Math.round((i / j) * 100); | |
if (currentPercent < knownPercent) { | |
break; |
$(document).ready(() => { | |
/** | |
* @param {element} e The element that was clicked | |
* @return {element} The element that is being pointed to | |
*/ | |
const goTo = (e) => { | |
let goTo = $(e.currentTarget).attr('href'); | |
// remove the pound sign | |
goTo = goTo.substr(1); | |
// Use document.getElementById() to accomodate colon in element id |
Take these two DOMs:
<div id="vue">
<custom-component>
<div>
<p>Here's a static output of how the custom component would render></p>
</div>
</custom-component>
Let's say we want to call a function that does some work, then we want to do our own work, then let the function know that we've completed our work. We could achieve that by doing this:
var s = () => {
console.log('start');
return Promise.resolve(() => { console.log('run after finish') });
};
const start = s();
By default, scroll bars do not appear on Mac except when the user is scrolling and when there is hidden content. You can double check this by going to System Preferences -> General -> Show scroll bars: Automatically based on mouse or trackpad.
When you do scroll, the width of viewport and the available width of the inner content does not change from what it was. If the width was 300 pixels, it still is 300 pixels.
If you change the "Show scroll bars" setting to "Always" then the scrollbar takes up a decided amount of width - 16 pixels to be precise.[^1] Let's say your browser height is 300 pixels and your broswer width is also 300 pixels. With this setting, if you toggle the height of the body from 300 to 600, causing scrollableness, then a scrollbar will appear only have you have done the toggle. The width of your body will have gone from 300 to 284 pixels, because the scrollbar takes up space in a way that it did not in the other setting. Interestingly, if you're talking about
<html> | |
<head> | |
<script> | |
/** | |
* This function used with gratitude from | |
* http://stackoverflow.com/a/34666534/1591507 | |
* I want to refactor this to ES6 so badly but | |
* since it has to reside in the DOM to avoid FOUT, | |
* we can't transpile with Babel unfortunately | |
*/ |
<script> | |
// Store and retrieve 1000 100-byte items. Then store and retrieve 10 10000-byte item | |
let test = (numBlocks, byteSze) => { | |
let bytes = 'a'; | |
for (let i = 0; i < byteSze; i++) { | |
bytes += 'a'; | |
} |