Twitter abuses all media file uploads, each type in its own way. If we want to upload a good looking animation loop from some low-color, high-detail generative art, we have to game their system's mechanisms.
don't upload a video file, they will re-encode it into absolute 💩
create a GIF, which they will auto-convert into a video file 😱
The frames of the GIF will be resized to an even-sized width using an extremely naive algorithm. Your GIF should be an even size (1000, 2000,
This document isn't an explainer on Feature Flags, you can find that with my amateur writeup, or literally hundreds of better writeups out there.
This document is also agnostic to the choice of service you'd use: LaunchDarkly or split.io or optimizely or whatever; that's orthogonal to this conversation.
Instead, this document is a list of considerations for implementing a client for using Feature Flags for User Interface development. Service providers usually give a simple fetch and use client and that's it; I contend that there's a lot more to care about. Let's dive in.
To encourage usage, we'd like for the developer experience to be as brutally simple as possible. So, this should be valid usage:
(I'm enjoying doing these raw, barely edited writeups; I hope they're useful to you too)
This is my own writeup on feature flags; for a deep dive I'd recommend something like Martin Fowler's article (https://martinfowler.com/articles/feature-toggles.html).
So. Feature flags. The basic idea that you'll store configuration/values on a database/service somewhere, and by changing those values, you can change the user experience/features for a user on the fly.
Let's say that you're building a new feature, called 'new-button' which changes the color of buttons, which is currently red, to blue. Then you'd change code that looks like this -
| export const carbonScale = (params = {}) => { | |
| const { | |
| length = 20, | |
| minSize = 10, | |
| intervals = 4, | |
| increment = 2, | |
| transform = v => v | |
| } = params; | |
| const getSize = count => { |
| /* https://twitter.com/wesbos/status/932644812582522880/ */ | |
| font-feature-settings: "tnum"; | |
| font-variant-numeric: tabular-nums; |
| """ | |
| Dynamic Routing Between Capsules | |
| https://arxiv.org/abs/1710.09829 | |
| """ | |
| import torch | |
| import torch.nn as nn | |
| import torch.optim as optim | |
| import torch.nn.functional as F | |
| import torchvision.transforms as transforms |
| <html> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/regl/1.3.0/regl.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.3/chroma.min.js"></script> | |
| <script> | |
| const regl = createREGL(); | |
| const doc = document.body; | |
| const docWidth = window.innerWidth; |
| // This function is based on the code found at (the original source doesn't work well) | |
| // http://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate | |
| // | |
| // She following page explains how UV map should be calculated | |
| // https://solutiondesign.com/blog/-/blogs/webgl-and-three-js-texture-mappi-1/ | |
| // | |
| // The following documentation shows what a apherical UV map should look like | |
| // https://threejs.org/examples/#misc_uv_tests | |
| var ThreeUvMapper = { |
| import { Subject } from 'rxJs/Rx'; | |
| const body = document.querySelector('body'); | |
| let beginningScrollPostion = body.scrollTop, | |
| scrollObserver = new Subject<string>(), | |
| windowEventListender = window.addEventListener('scroll', (scrollEvent) => { | |
| if (body.scrollTop > beginningScrollPostion) { | |
| scrollObserver.next('down'); | |
| } else { | |
| scrollObserver.next('up'); |