A list of generic params with good labels!
Yesterday, Microsoft announced the release candidate of TypeScript 4.0. And with that comes Labeled Tuple Elements, which is the answer to the title of this post.
Generic interface with unknown arguments
Here’s a contrived example. IQuery. It’s meant to describe the shape of functions that query things. It always returns a promise and takes a Generic to describe what the promise emits (TReturn). The interface is also flexible enough to take no arguments or an unknown number of arguments (UParams extends any[] = []).
interface IQuery<TReturn, UParams extends any[] = []> {
(...args: UParams): Promise<TReturn>
}Sample function: findSongAlbum()
Leveraging this interface, we’ll write a function that finds a song album by a title and an artist. It returns a promise that emits a single object of type Album. …
This is a walkthrough on how to implement a skeleton loading infrastructure into a front-end application. The approach builds skeleton states as a system so your front-end can scale while maintaining consistency for loading states. I’ll use React, React Context and Hooks for this example.
Basic Idea
Implement a “skeleton state” for the lowest level components in your UI. Then use the state management feature of your chosen framework to toggle on and off the skeleton state when necessary.
if/else statements are a staple for handling conditional logic. It’s natural for most developers to reach for the if/else statement when a decision needs to be made in code. However, in the reactive programming paradigm (e.g. with RxJS) this conditional statement is mysteriously unavailable. How can you code without it?
This is a re-post from February 26, 2018. The code snippets on this have been updated to RxJS > 5.5 when “pipeable” operators where introduced.
TL;DR
Break up each branch of an if block into its own bite sized stream and end by tying each branch back together with a merge operator. …
Design tokens manage and store User Interface (UI) decisions such as spacing, color, typography, and motion. These decisions are stored in a config-like format to support the needs of any platform (Web, mobile OS, etc). In this blog post, I’ll demonstrate how you can leverage design tokens and SCSS mixins to capture a system’s design language. The final output will be a collection of SCSS mixins that map to design tokens and can help to reel in messy CSS inconsistencies amongst dev teams and close the gap between designers and developers with great success.
Background: The visual language of your product
A product’s visual design, at its core, is defined by basic visual elements. …
