How to use:
./wordle.sh
Or try the unlimit mode:
<template> | |
<VirtualScroller v-slot="{ item }" :item-height="35" :items="myMassiveArray"> | |
<div :item="item" :key="item.id">{{ item.details.i.guess? }}</div> | |
</VirtualScroller> | |
</template> |
https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff
While attempting to explain JavaScript's reduce
method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.
JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List
is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu
/** | |
* Think of this "main.js" file as your application bootstrap. | |
*/ | |
import Vue from 'vue' | |
import Resource from 'vue-resource' | |
import VueRouter from 'vue-router' | |
import routes from './routes' | |
import middleware from './middleware' |
Inspired by dannyfritz/commit-message-emoji
See also gitmoji.
Commit type | Emoji |
---|---|
Initial commit | 🎉 :tada: |
Version tag | 🔖 :bookmark: |
New feature | ✨ :sparkles: |
Bugfix | 🐛 :bug: |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent