| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>My Angular from Scratch</title> | |
| <style> | |
| .my-component { | |
| font-family: Arial, sans-serif; |
| { | |
| "context-hook": { | |
| "prefix": "context", | |
| "body": [ | |
| "import React, {useState, createContext, useContext} from 'react'", | |
| "", | |
| "interface ${1/(.*)/${1:/capitalize}/}ContextAPI {", | |
| " $1: number", | |
| " set${1/(.*)/${1:/capitalize}/}: (data: number) => void", | |
| "}", |
https://www.nerdfonts.com/font-downloads
The following solution thanks to @hackerzgz & @snacky101 will install all nerd fonts;
brew tap homebrew/cask-fonts
brew search '/font-.*-nerd-font/' | awk '{ print $1 }' | xargs -I{} brew install --cask {} || true
Unless otherwise noted (either in this file or in a file's copyright section) the contents of this gist are Copyright ©️2020 by Christopher Allen, and are shared under spdx:Creative Commons Attribution Share Alike 4.0 International (CC-BY-SA-4.) open-source license.
If you more tips and advice like these, you can become a monthly patron on my GitHub Sponsor Page for as little as $5 a month; and your contributions will be multipled, as GitHub is matching the first $5,000! This gist is all about Homebrew, so if you like it you can support it by donating to them or becoming one of their Github Sponsors.
Jest Mock Any Property on Window Utility - with automatic cleanup.
In my experience, infinite lists use two basic layout strategies. The first uses absolute positioning to control where visible items are rendered. The second uses relative positioning (with top/left padding to offset for unrendered items).
In both cases, the list abstraction caches some metadata about the size of items once they have been rendered– so that it knows where to position the items that come after them.
Both of these strategies need to handle reflow. For example, changing the width of a list often affects the height of its itesm. Generally speaking, only the "window" of rendered (visible) items are remeasured in this case (because it would be too slow to rerender and remeasure all of the items before). But once a user scrolls backwards (up/left)– the list needs to account for the reflowed sizes. If it didn't, items would appear to jump up or down (depending on the delta between the previous, cached sizes and the new/reflowed sizes).
How the list deals with new sizes
I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.
But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.
Svelte is a language.
Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?
A few projects that have answered this question:
| "use strict"; | |
| // Load plugins | |
| const autoprefixer = require("autoprefixer"); | |
| const browsersync = require("browser-sync").create(); | |
| const cp = require("child_process"); | |
| const cssnano = require("cssnano"); | |
| const del = require("del"); | |
| const eslint = require("gulp-eslint"); | |
| const gulp = require("gulp"); |
Note:
When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.
If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:
