Arthur
Arthur runs developer relations at GoByte. Runnable snippet first, prose second, and a soft spot for a well formed curl.
Posts hosted by Arthur
-
TypeScript from zero: copy before you change a field
An object spread copies the fields and replaces one. The original latte stays 450 cents. The tipped copy is 540. The program prints 450 540.
-
TypeScript from zero: a class bundles the method
A class holds the fields and the method together. new Item makes a latte. label prints latte $4.50.
-
TypeScript from zero: an object has fields
An object type names the fields. Item has a drink and a price in cents. label takes an Item and the program prints latte $4.50.
-
TypeScript from zero: a name has a type
A TypeScript name can carry a type. name is a string, cents is a number, and ready is a boolean. The program prints latte $4.50 ready.
-
Motion from zero: easing is a function of time
Easing maps a time from 0 to 1 onto a progress from 0 to 1. easeOut is slow at the end. The program prints 0, 0.75, and 1.
-
Motion from zero: move the transform, not the width
Changing width makes the browser lay the page out again. Changing a transform does not. The price label moves with translateX(24px). Its width stays.
-
Motion from zero: an animation is an object
One object holds the slide of a price label: the duration, the distance, and the opacity. The program builds one and prints 320, 24, and 1.
-
Motion from zero: time and distance are numbers
A duration is a number of milliseconds. A distance is a number of pixels. 320 and 24 slide a price label. The program prints 320 and 24.
-
Easing: a function from progress to progress
GoByte Skills #21: an ease is just a function from progress to progress. Same distance, same duration, four curves, and at halftime one of them has already overshot the finish line. On purpose.
-
Animate transform and opacity only
GoByte Skills #20: animate transform and opacity, not top or width. Traced in Chrome: 57 layouts for left, 1 for x, same move. Plus why GSAP still freezes when your main thread does.
-
GSAP timelines: animation as data
GoByte Skills #19: a GSAP timeline is a seekable program. Every value is a function of the playhead, so you can scrub, reverse and test any frame in plain Node. Plus the three ways it quietly stops being pure.
-
Make illegal states unrepresentable
GoByte Skills #15: Three booleans are 8 states and your screen means three. Model React state as a tagged union and the compiler rules out the other 5. Validate the data at the edge, and the inside stays honest.
-
State is a snapshot
GoByte Skills #14: In React, count is not a live variable. Each render gets its own constant, and a click handler only ever sees the render it was born in. That is why setCount(count + 1) three times adds one, and how the updater fixes it.
-
TypeScript narrowing: typeof is the bouncer
GoByte Skills #13: typeof does not just check a type, it proves one. After the check each branch gets a narrower type and the compiler holds you to it. A handwritten type guard only promises.
-
Motion from zero: the second step starts where the first ended
Two steps share one object. The second step's fromX is the first step's x. The program prints 0 then 24, then 24 then 48.
-
Motion from zero: reduced motion sets the duration to zero
Some readers ask the system for less motion. Honor it by using a duration of 0. The program prints 320 for a normal run and 0 when motion is reduced.
-
TypeScript from zero: an interface is a method list
An interface lists the methods a function needs. Labeller asks for label. Item has label. show prints latte $4.50.
-
TypeScript from zero: a union names the cases
A union is a value that is one of several shapes. Paid is yes with the cents, or no. Reading yes prints paid 450. Reading no prints unpaid.