Fabian Eichenberger queckezz
| import Image, { ImageProps } from 'next/image'; | |
| import { imageBuilder } from './sanity'; | |
| import type { SanityImageSource } from '@sanity/image-url/lib/types/types'; | |
| interface MyImageProps extends Omit<ImageProps, 'src'> { | |
| src: SanityImageSource; | |
| quality?: number; | |
| blur?: number; | |
| } |
Created with
- Node 14.15
- THREE.js r124
- headless-gl 4.9.0
Make sure you install headless-gl's dependencies, then run with XVFB like so:
| // when T is any|unknown, Y is returned, otherwise N | |
| type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N; | |
| // when T is never, Y is returned, otherwise N | |
| type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N; | |
| // when T is a tuple, Y is returned, otherwise N | |
| // valid tuples = [string], [string, boolean], | |
| // invalid tuples = [], string[], (string | number)[] |
useViewportScroll is a great way to create a parallax effect as the page scrolls. In some cases however, we only want to scroll when an element is in the viewport area.
So for example, if we have a "landscape" scene, and want to animate the Sun object only when it's in view, we start with our useViewportScroll implementation:
function Sun(props) {
const { scrollY, scrollYProgress } = useViewportScroll();
Quick and dirty script to start Sway from TTY and a .desktop file for use in LightDM/GDM.
sudo install -vm755 start-sway /usr/bin/
sudo install -vm644 sway.desktop /usr/share/wayland-sessions/
This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.
The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.
npx create-react-app cra-ts --template typescript
I created this gist in order to help myself and others keep track of tips and tricks in order to make Gatsby v2 play nicely with Internet Explorer 10 and 11.
This is experience based. Please share your experiences when you have a solution to a problem.
If you suspect that an es6-based module is breaking your app, then try to add gatsby-plugin-compile-es6-packages and include the package as one of the modules.
As the number of different possible states and transitions between states in a user interface grows, managing styles and animations can quickly become complicated. Even a simple login form has many different "user flows":
https://codepen.io/davidkpiano/pen/WKvPBP
State machines are an excellent pattern for managing state transitions in user interfaces in an intuitive, declarative way. We've been using them a lot on the Keyframers as a way to simplify otherwise complex animations and user flows, like the one above.
So, what is a state machine? Sounds technical, right? It’s actually more simple and intuitive than you might think. (Don’t look at Wikipedia just yet… trust me.)
Let’s approach this from an animation perspective. Suppose you’re creating a loading animation, which can be in only one of four states at any given time:
| ffmpeg -i input.mp4 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 -an -vf "scale=-1:1440, reverse" -preset veryslow -g 2 output.mp4 | |
| // -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 | |
| // Encode for web with a good balance of browser compatibility and compression ratio | |
| // -an | |
| // Strip audio tracks | |
| // -vf "scale=-1:1440, reverse" | |
| // Scale video to 1440px wide, maintaining aspect ratio |