Lightnews — Scholar-powered news

Benjamin Lesné

@benjaminlesne.bsky.social

🚀 The WLC Scenario Explorer is now LIVE!

This open-source tool explore different possible scenarios for whole life cycle greenhouse gas emissions of buildings across Europe.

More info below! 🧵👇

July 10, 2025 at 10:01 AM

Benjamin Lesné

@benjaminlesne.bsky.social

TIL: CTRL + ALT + R toggles Reader View in Firefox, switching from a white background to a dark, clutter-free version, way easier to read!

Not all sites support it, though. Not sure how it decides. 🤔

website superuser.com with reader mode activated in firefox

January 30, 2025 at 9:59 AM

Benjamin Lesné

@benjaminlesne.bsky.social

@mattpocock.com I just took your quiz, how did I do? 👀 What's the average score? I'm curious to know where I stand!

The quiz 👉 totaltypescript.com/wizard-quiz

January 24, 2025 at 8:06 PM

Benjamin Lesné

@benjaminlesne.bsky.social

When navigating to /about#author with scroll-behavior: smooth, I landed 100px above my author section.

Turns out my images were not loaded yet when the browser calculated where to scroll to.

To fix this you need to provide a width and height to your img tag to prevent reflows and repaints

ReactJs code:
<img src={url} alt={caption} width="50" height="100" />

January 3, 2025 at 3:49 PM

Benjamin Lesné

@benjaminlesne.bsky.social

Oops, you just messed up your Line Graph's Y-axis!

No TypeScript warning, no runtime error, now it’s just you and your half-empty Line graph.

Should be fixed in v3 🤞

demo here: codesandbox.io/p/sandbox/xy...

#recharts

typescript code:
import { AreaChart, LineChart, Area, Line } from "recharts";

const sharedAmongGraphs = {
tickCount: 4,
stackId: "1", // should not be there
};

const LineGraph = () => (
<LineChart>
{/* ... */}
<Line {...sharedAmongGraphs} />
<Line {...sharedAmongGraphs} />
</LineChart>
);

const StackedArea = () => (
<AreaChart>
{/* ... */}
<Area {...sharedAmongGraphs} />
<Area {...sharedAmongGraphs} />
</AreaChart>
);

December 25, 2024 at 8:47 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 19 ✅ adventofts.com/events/2024/19

Shoutout to my Copilot free plan for making today’s challenge beatable 😂

#spoiler

$type Whitespace = " " | "\t" | "\n" | "\r" type TrimLeft<S extends string> = S extends `${Whitespace}${infer Rest}` ? TrimLeft<Rest> : S; type TrimRight<S extends string> = S extends `${infer Rest}${Whitespace}` ? TrimRight<Rest> : S; type Trim<S extends string> = TrimLeft<TrimRight<S>>; type SplitStatements<S extends string> = S extends `${infer First};${infer Rest}` ? [...ParseStatement<Trim<First>>, ...SplitStatements<Trim<Rest>>] : S extends `${infer Last}` ? Last extends "" | `${Whitespace}${string}` ? [] : [...ParseStatement<Trim<Last>>] : []; type ParseStatement<S extends string> = S extends `${("let" | "const" | "var")} ${infer VarName}${Whitespace}=${Whitespace}${string}` ? [{ id: Trim<VarName>; type: "VariableDeclaration" }] : S extends `${infer FuncName}(${infer Arg})` ? [{ argument: Trim<Arg>; type: "CallExpression" }] : []; type Parse<S extends string> = SplitStatements<Trim<S>>;$

December 19, 2024 at 8:40 PM

Benjamin Lesné

@benjaminlesne.bsky.social

And of course, Dominik's solution using NoInfer is much better 😂

With NoInfer, we basically say: don't use the defaultColor variable to infer the Color type.

📽️ Learn NoInfer: youtube.com/watch?v=mkuChhuHO50

Dominik's repo: github.com/TkDodo/advent-of-typescript/blob/main/2024/18.ts

const createStreetLight = <Color extends string>(
colors: Array<Color>,
defaultColor: NoInfer<Color>
) => {
console.log(colors);
return defaultColor;
};

December 18, 2024 at 10:13 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 18 ✅ adventofts.com/events/2024/18

Slowly sharpening my TypeScript skills 🔪

#spoiler

type Fn = <Color extends string, Colors extends string[] = Color[]>(
colors: Colors,
defaultColor: Colors[number]
) => Colors[number];

const createStreetLight: Fn = (colors, defaultColor) => {
console.log(colors);
return defaultColor;
};

December 18, 2024 at 9:55 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 17 ✅ adventofts.com/events/2024/17

TIL how to make intrinsic types:
📽️ youtube.com/watch?v=B3LDiHl7pBI

Not gonna lie, I had to take a little peek at the answer to get unstuck.. Don’t judge me! 🙈

#spoiler

type ComposeFunction = <F, G, H, Result>(
f: (arg: F) => G,
g: (arg: G) => H,
h: (arg: H) => Result
) => (arg: F) => Result;

const compose: ComposeFunction = (f, g, h) => (a) => h(g(f(a)));

type FirstChar<T extends string> = T extends `${infer First}${string}`
? First
: never;
const firstChar = <T extends string>(x: T) => x[0] as FirstChar<T>;
const upperCase = <T extends string>(x: T) => x.toUpperCase() as Uppercase<T>;
const lowerCase = <T extends string>(x: T) => x.toLowerCase() as Lowercase<T>;
const firstItem = <T extends Array<string>>(x: T): T[0] => x[0];
const makeTuple = <T extends string>(x: T): [T] => [x];
const makeBox = <T>(value: T) => ({ value });

December 17, 2024 at 5:53 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 16 ❌ www.adventofts.com/events/2024/16

TIL Partial<['1', '2', '3']> preserves the order of elements in the array, meaning we can't assign ['2', '3'] to it. Super useful for creating the "Magic Curry"

Solution from @tkdodo.eu below 👇
github.com/TkDodo/adven...

#spoiler

declare function DynamicParamsCurrying<T extends (...args: any) => any>(
fn: T,
): CurriedFunction<Parameters<T>, ReturnType<T>>;

type CurriedFunction<Params extends Array<any>, Return> = <T extends Partial<Params>>(
...args: T
) => T["length"] extends Params["length"]
? Return
: T["length"] extends number
? CurriedFunction<DropFirst<Params, T["length"]>, Return>
: never;

type DropFirst<
T extends Array<any>,
Count extends number,
Acc extends Array<any> = [],
> = Acc["length"] extends Count
? T
: T extends [infer _, ...infer Rest]
? DropFirst<Rest, Count, [...Acc, _]>
: T;

December 16, 2024 at 9:00 PM

Benjamin Lesné

@benjaminlesne.bsky.social

@sachagreif.com I couldn’t DM you, so here I am:

looks like the backend section is missing its label 😬

2024.stateofjs.com/en-US/other-...

December 16, 2024 at 8:45 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 15 ✅ adventofts.com/events/2024/15

If you’ve got a more elegant solution, I’d love to see it!

#spoiler

type GetNextDestination<T extends string> =
T extends `${infer Destination}-${infer Rest}`
? [Destination, `-${Rest}`]
: [T, ""];

type GetNextFuelAmount<
T extends string,
Accumulator extends string[] = []
> = T extends `-${infer Rest}`
? GetNextFuelAmount<Rest, ["-", ...Accumulator]>
: [Accumulator["length"], T];

type GetRoute<
T extends string,
Accumulator extends any[] = [],
Fuel extends GetNextFuelAmount<T> = GetNextFuelAmount<T>,
Destination extends GetNextDestination<Fuel[1]> = GetNextDestination<Fuel[1]>,
RestOfRoute extends string = Destination[1]
> = RestOfRoute extends ""
? Destination[0] extends ""
? Accumulator
: [...Accumulator, [Destination[0], Fuel[0]]]
: GetRoute<
RestOfRoute,
Accumulator extends []
? [[Destination[0], 0]]
: [...Accumulator, [Destination[0], Fuel[0]]]
>;

December 15, 2024 at 7:49 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 14 ✅ adventofts.com/events/2024/14

#spoiler

type PerfReview<T extends AsyncGenerator> = T extends AsyncGenerator<
infer R,
any,
any
>
? R
: never;

December 14, 2024 at 2:13 PM

Benjamin Lesné

@benjaminlesne.bsky.social

TIL about branded types in TypeScript
It allows you to give a meaningful type name to a variable typed as "string"

Now every time I see EmailAddress, I know it is an email for sure

📽️ Source video: www.youtube.com/watch?v=rpw5...

$type EmailAddress = string & { __branded: "" }; function isEmail(email: string): email is EmailAddress { return email.includes("@") } function runDeepInMyCodebase(userInput: string) { if (isEmail(userInput)) { console.log("An email!", userInput); // ^? userInput: EmailAddress } }$

December 13, 2024 at 10:32 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 13 ✅ adventofts.com/events/2024/13

TIL about the in and out keywords in TypeScript!

👇This video cleared up co/contra/bi/in-variant types for me and made me discover the in/out keywords

🎥 www.youtube.com/watch?v=bWF0...
The author: x.com/andrew8088

#spoiler

December 13, 2024 at 5:43 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 12 ✅ adventofts.com/events/2024/12

The "Names" type with 300k+ values made my PC cough
Just hovering over the type took a solid 20 seconds to display the annotation 🫠

#spoiler #typescript

$type ThreeStringsTuple = [string, string, string]; type LengthOfString< S extends string, T extends any[] = [] > = S extends `${infer _}${infer Rest}` ? LengthOfString<Rest, [...T, any]> : T["length"]; type GetRating< Index extends number, Rating extends "naughty" | "nice" = "nice", Accumulator extends number[] = [], Max extends number = 0 > = Index extends Max ? Rating extends "naughty" ? "nice" : "naughty" : GetRating< [Index, ...Accumulator]["length"], Rating extends "naughty" ? "nice" : "naughty", [Index, ...Accumulator], Max extends 0 ? Index : Max > type ToObject<T extends ThreeStringsTuple> = { name: T[0]; rating: GetRating<LengthOfString<T[0]>>; count: T[2] extends `${infer N extends number}` ? N : never; }; type FormatNames<T extends ThreeStringsTuple[]> = { [K in keyof T]: ToObject<T[K]>; };$

December 13, 2024 at 3:46 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 11 ✅ adventofts.com/events/2024/11

TIL how to type the "new" in a class

#spoiler #typescript

type Excuse<T extends Record<string, string>> = {
new (excuses: Record<string, unknown>): {
[K in keyof T]: K extends string ? `${K}: ${T[K]}` : never;
}[keyof T];
};

December 11, 2024 at 2:11 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 10 ✅ adventofts.com/events/2024/10

TIL about the left shift operator (<<) and hope I will never use it again lmao

#spoiler

enum Gift {
Coal = 0,
Train = 1,
Bicycle = Train << 1,
SuccessorToTheNintendoSwitch = Bicycle << 1,
TikTokPremium = SuccessorToTheNintendoSwitch << 1,
Vape = TikTokPremium << 1,
Traditional = Train | Bicycle,
OnTheMove = Coal | TikTokPremium | Vape | Bicycle,
OnTheCouch = (OnTheMove & ~Bicycle) | SuccessorToTheNintendoSwitch,
}

December 10, 2024 at 11:13 AM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 9 ✅ adventofts.com/events/2024/9

TIL how to declare types for untyped third-party packages

#spoiler

/// <reference types="node" />

declare module 'santas-special-list' {
export type Status = 'naughty' | 'nice'
export type Child = {
name: string;
status: Status
}
export type List = Child[]

December 9, 2024 at 4:33 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 8 ✅ adventofts.com/events/2024/8

I learned how to type env variables here:
www.totaltypescript.com/how-to-stron...

#spoiler

$declare namespace NodeJS { interface ProcessEnv { MOOD_LIGHTS: "true"; BATH_TEMPERATURE: "327.59"; STRAWBERRIES: "chocolate"; } }$

December 8, 2024 at 11:15 AM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 7 ✅

To be honest, I don’t use const like this very often.
Spent way more time on it than I’d like to admit 😬

#spoiler
adventofts.com/events/2024/7

const createRoute = <const Route extends string[]>(author: string, route: Route) => ({
author,
route,
createdAt: Date.now(),
})

December 7, 2024 at 9:54 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 6 ✅

adventofts.com/events/2024/6

Careful, #spoiler!

To avoid seeing the spoiler you can subscribe to spoiler droid here:
bsky.app/profile/did:...

const createRoute = <Route extends number | string>(author: string, route: Route) => {
console.log(`[createRoute] route created by ${author} at ${Date.now()}`)
return route
}

December 6, 2024 at 3:34 PM

Benjamin Lesné

@benjaminlesne.bsky.social

DAY 5 ✅
Answer below careful #spoiler

adventofts.com/events/2024/5

const createRoute = <T>(author: string, route: T) => {
console.log(`[createRoute] route created by ${author} at ${Date.now()}`);
return route;
};

December 5, 2024 at 2:48 PM

Benjamin Lesné

@benjaminlesne.bsky.social

#spoiler

December 5, 2024 at 2:46 PM

Benjamin Lesné

@benjaminlesne.bsky.social

Today I got hit with:
ReferenceError: can't access lexical declaration myVar before initialization

...with no ESLint or TypeScript errors.
Turns out I had circular dependencies

I used Madge to spot them:
madge ./src/main.tsx -c

You can also generate graphs!

Madge repo: github.com/pahen/madge

Madge cli output:
Processed 47 files (1s) (59 warnings)

✖ Found 4 circular dependencies!

1) lib/constants.ts > lib/myFolder/constants.ts
2) lib/constants.ts > lib/myFolder/constants.ts > lib/types.ts
3) lib/constants.ts > lib/myFolder/constants.ts > lib/types.ts > lib/schemas.ts
4) lib/myFolder/constants.ts > lib/types.ts > lib/schemas.ts > lib/myFolder/schemas.ts

November 29, 2024 at 10:43 AM

Add to Home Screen

Light up
your news

Add to Home Screen

Light upyour news

Sign in to Lightnews

Sign up to start reading

Connect Bluesky

Connect with Bluesky

Light up
your news