Bruno Sabot
@brunosabot.bsky.social
`useWhyDidYouUpdate("MyComponent", props);`
This hook will let you know from the console the attributes of an object that have been updated, causing rerendering.
You should use it to avoid unnecessary renders.
#techtweets #day200
This hook will let you know from the console the attributes of an object that have been updated, causing rerendering.
You should use it to avoid unnecessary renders.
#techtweets #day200
April 29, 2025 at 6:25 PM
`useWhyDidYouUpdate("MyComponent", props);`
This hook will let you know from the console the attributes of an object that have been updated, causing rerendering.
You should use it to avoid unnecessary renders.
#techtweets #day200
This hook will let you know from the console the attributes of an object that have been updated, causing rerendering.
You should use it to avoid unnecessary renders.
#techtweets #day200
When writing JavaScript, you should always pick functions over classes.
For the same result, the code generated by Babel with be smaller with functions.
#techtweets #day199
For the same result, the code generated by Babel with be smaller with functions.
#techtweets #day199
April 29, 2025 at 6:25 PM
When writing JavaScript, you should always pick functions over classes.
For the same result, the code generated by Babel with be smaller with functions.
#techtweets #day199
For the same result, the code generated by Babel with be smaller with functions.
#techtweets #day199
You can use intersection types to extends an existing TypeScript type.
It is useful to reuse and factorize some pieces of definitions.
#techtweets #day198
It is useful to reuse and factorize some pieces of definitions.
#techtweets #day198
April 29, 2025 at 6:25 PM
You can use intersection types to extends an existing TypeScript type.
It is useful to reuse and factorize some pieces of definitions.
#techtweets #day198
It is useful to reuse and factorize some pieces of definitions.
#techtweets #day198
With ECMAScript 2022, JavaScript now has private fields in classes.
You need to prefix an attribute or a method with # to make it private.
#techtweets #day197
You need to prefix an attribute or a method with # to make it private.
#techtweets #day197
April 29, 2025 at 6:25 PM
With ECMAScript 2022, JavaScript now has private fields in classes.
You need to prefix an attribute or a method with # to make it private.
#techtweets #day197
You need to prefix an attribute or a method with # to make it private.
#techtweets #day197
The object-fit CSS property will keep your image with a good ratio and the box will either contain the image perfectly or crop it.
#techtweets #day195
#techtweets #day195
April 29, 2025 at 6:25 PM
The object-fit CSS property will keep your image with a good ratio and the box will either contain the image perfectly or crop it.
#techtweets #day195
#techtweets #day195
High order component add a generic behavior to a component.
It can be helpful to wrap an element with a descriptive tooltip.
#techtweets #day194
It can be helpful to wrap an element with a descriptive tooltip.
#techtweets #day194
April 29, 2025 at 6:25 PM
High order component add a generic behavior to a component.
It can be helpful to wrap an element with a descriptive tooltip.
#techtweets #day194
It can be helpful to wrap an element with a descriptive tooltip.
#techtweets #day194
You can load polyfills with the `nomodule` attribute: modern browser will ignore the script while old will not understand the `nomodule` attribute.
#techtweets #day193
#techtweets #day193
April 29, 2025 at 6:25 PM
You can load polyfills with the `nomodule` attribute: modern browser will ignore the script while old will not understand the `nomodule` attribute.
#techtweets #day193
#techtweets #day193
To create truly readonly objects in TypeScript, you can use the `as const` suffix to a variable declaration.
Any property or sub-property will then become readonly.
#techtweets #day192
Any property or sub-property will then become readonly.
#techtweets #day192
April 29, 2025 at 6:25 PM
To create truly readonly objects in TypeScript, you can use the `as const` suffix to a variable declaration.
Any property or sub-property will then become readonly.
#techtweets #day192
Any property or sub-property will then become readonly.
#techtweets #day192
The padStart and padEnd functions are adding a specific character at the start or the end of your string to reach a specific string length.
#techtweets #day191
#techtweets #day191
April 29, 2025 at 6:25 PM
The padStart and padEnd functions are adding a specific character at the start or the end of your string to reach a specific string length.
#techtweets #day191
#techtweets #day191
With the CSS aspect-ratio, you can define the size of an element without knowing about the final rendered width of your element.
It might help you avoid layout shifts
#techtweets #day189
It might help you avoid layout shifts
#techtweets #day189
April 29, 2025 at 6:25 PM
With the CSS aspect-ratio, you can define the size of an element without knowing about the final rendered width of your element.
It might help you avoid layout shifts
#techtweets #day189
It might help you avoid layout shifts
#techtweets #day189
`setInterval` is not directly compatible with React, as it needs to match start and stop with a component mounting and unmounting.
The hook that solves that uses refs and effects to manage the interval correctly.
#techtweets #day188
The hook that solves that uses refs and effects to manage the interval correctly.
#techtweets #day188
April 29, 2025 at 6:25 PM
`setInterval` is not directly compatible with React, as it needs to match start and stop with a component mounting and unmounting.
The hook that solves that uses refs and effects to manage the interval correctly.
#techtweets #day188
The hook that solves that uses refs and effects to manage the interval correctly.
#techtweets #day188
Did you know that you can group your TypeScript code inside namespaces?
It will act like an object, but it will also merge multiple definitions if included in the same namespace
#techtweets #day186
It will act like an object, but it will also merge multiple definitions if included in the same namespace
#techtweets #day186
April 29, 2025 at 6:24 PM
Did you know that you can group your TypeScript code inside namespaces?
It will act like an object, but it will also merge multiple definitions if included in the same namespace
#techtweets #day186
It will act like an object, but it will also merge multiple definitions if included in the same namespace
#techtweets #day186
There is a `showPicker()` method on HTML `` elements that can open the detailed view for `date`, `month`, `week`, `time`, `datetime-local`, `color`, and `file` types.
This can also be triggered for `
This can also be triggered for `
April 29, 2025 at 6:24 PM
There is a `showPicker()` method on HTML `` elements that can open the detailed view for `date`, `month`, `week`, `time`, `datetime-local`, `color`, and `file` types.
This can also be triggered for `
This can also be triggered for `
The CSS order property allow you to display items in a different order.
It is very helpful on responsive designs or to priorise the right information for screen readers -a title is more important than an image.
Use it with care however.
#techtweets #day183
It is very helpful on responsive designs or to priorise the right information for screen readers -a title is more important than an image.
Use it with care however.
#techtweets #day183
April 29, 2025 at 6:24 PM
The CSS order property allow you to display items in a different order.
It is very helpful on responsive designs or to priorise the right information for screen readers -a title is more important than an image.
Use it with care however.
#techtweets #day183
It is very helpful on responsive designs or to priorise the right information for screen readers -a title is more important than an image.
Use it with care however.
#techtweets #day183
The useKeyPress hook returns true when a specific key is pressed.
`const forward = useKeyPress("w");`
You might want to use it for a `wasd` navigation for example.
#techtweets #day182
`const forward = useKeyPress("w");`
You might want to use it for a `wasd` navigation for example.
#techtweets #day182
April 29, 2025 at 6:24 PM
The useKeyPress hook returns true when a specific key is pressed.
`const forward = useKeyPress("w");`
You might want to use it for a `wasd` navigation for example.
#techtweets #day182
`const forward = useKeyPress("w");`
You might want to use it for a `wasd` navigation for example.
#techtweets #day182
Typescript decorators are a simple way to apply an high order function on a method or a class.
It can be used to measure a method's performance or inject additional parameters among many other use cases.
#techtweets #day180
It can be used to measure a method's performance or inject additional parameters among many other use cases.
#techtweets #day180
April 29, 2025 at 6:24 PM
Typescript decorators are a simple way to apply an high order function on a method or a class.
It can be used to measure a method's performance or inject additional parameters among many other use cases.
#techtweets #day180
It can be used to measure a method's performance or inject additional parameters among many other use cases.
#techtweets #day180
JavaScript has a limit for integer values... Hopefully, with BigInt, you can go further.
It can be instanced from most supported numeric format such as hexadecimal, octal, binary an of course decimal.
Just add a `n` at the end of your number!
#techtweets @day179
It can be instanced from most supported numeric format such as hexadecimal, octal, binary an of course decimal.
Just add a `n` at the end of your number!
#techtweets @day179
April 29, 2025 at 6:24 PM
JavaScript has a limit for integer values... Hopefully, with BigInt, you can go further.
It can be instanced from most supported numeric format such as hexadecimal, octal, binary an of course decimal.
Just add a `n` at the end of your number!
#techtweets @day179
It can be instanced from most supported numeric format such as hexadecimal, octal, binary an of course decimal.
Just add a `n` at the end of your number!
#techtweets @day179
Nice shapes are one CSS line away with `clip-path`.
With this property, you can apply a SVG polygon, circle, ellipse, path, ... to modify the shape of your element.
For example, it is easy to create askew blocs with polygon!
#techtweets #day177
With this property, you can apply a SVG polygon, circle, ellipse, path, ... to modify the shape of your element.
For example, it is easy to create askew blocs with polygon!
#techtweets #day177
April 29, 2025 at 6:24 PM
Nice shapes are one CSS line away with `clip-path`.
With this property, you can apply a SVG polygon, circle, ellipse, path, ... to modify the shape of your element.
For example, it is easy to create askew blocs with polygon!
#techtweets #day177
With this property, you can apply a SVG polygon, circle, ellipse, path, ... to modify the shape of your element.
For example, it is easy to create askew blocs with polygon!
#techtweets #day177
You can use a React hook to listen to the escape key stroke to close a modal or quit a focus.
BTW, looks at the `event.code` instruction which is meant to replace the `event.keyCode` which is now deprecated.
#techtweets #day176
BTW, looks at the `event.code` instruction which is meant to replace the `event.keyCode` which is now deprecated.
#techtweets #day176
April 29, 2025 at 6:24 PM
You can use a React hook to listen to the escape key stroke to close a modal or quit a focus.
BTW, looks at the `event.code` instruction which is meant to replace the `event.keyCode` which is now deprecated.
#techtweets #day176
BTW, looks at the `event.code` instruction which is meant to replace the `event.keyCode` which is now deprecated.
#techtweets #day176
Simplifying your CSS will improve your performances
The more complex your CSS rules are the longer your page will take to be repainted
The BEM model is one way to make your styles more robust and performant#techtweets #day175
web.dev/reduce-the-sco… en.bem.info
The more complex your CSS rules are the longer your page will take to be repainted
The BEM model is one way to make your styles more robust and performant#techtweets #day175
web.dev/reduce-the-sco… en.bem.info
April 29, 2025 at 6:24 PM
Simplifying your CSS will improve your performances
The more complex your CSS rules are the longer your page will take to be repainted
The BEM model is one way to make your styles more robust and performant#techtweets #day175
web.dev/reduce-the-sco… en.bem.info
The more complex your CSS rules are the longer your page will take to be repainted
The BEM model is one way to make your styles more robust and performant#techtweets #day175
web.dev/reduce-the-sco… en.bem.info
You can use the `is` type guard to specify what type is the returned value in TypeScript.
When working with union types, it will help you apply a specific behavior to a specific type
#techtweets #day174
When working with union types, it will help you apply a specific behavior to a specific type
#techtweets #day174
April 29, 2025 at 6:23 PM
You can use the `is` type guard to specify what type is the returned value in TypeScript.
When working with union types, it will help you apply a specific behavior to a specific type
#techtweets #day174
When working with union types, it will help you apply a specific behavior to a specific type
#techtweets #day174
JavaScript has a proxy object that could extend another object with a specific behavior: replacing values, performance measurement, extend DOM nodes, etc.
#techtweets #day173
#techtweets #day173
April 29, 2025 at 6:23 PM
JavaScript has a proxy object that could extend another object with a specific behavior: replacing values, performance measurement, extend DOM nodes, etc.
#techtweets #day173
#techtweets #day173
You can create crazy effects with the `mask` CSS property.
The mask works with opacity: a plain image for a no opacity mask, hidden for an opacity mask. semi-opacity also works.
Check an amazing example made by @5t3ph here:#techtweets #day171
codepen.io/5t3ph/pen/GRQe…
The mask works with opacity: a plain image for a no opacity mask, hidden for an opacity mask. semi-opacity also works.
Check an amazing example made by @5t3ph here:#techtweets #day171
codepen.io/5t3ph/pen/GRQe…
April 29, 2025 at 6:23 PM
You can create crazy effects with the `mask` CSS property.
The mask works with opacity: a plain image for a no opacity mask, hidden for an opacity mask. semi-opacity also works.
Check an amazing example made by @5t3ph here:#techtweets #day171
codepen.io/5t3ph/pen/GRQe…
The mask works with opacity: a plain image for a no opacity mask, hidden for an opacity mask. semi-opacity also works.
Check an amazing example made by @5t3ph here:#techtweets #day171
codepen.io/5t3ph/pen/GRQe…
You can use React Hooks to apply simple and usual behaviors to your code.
One of the useful hooks I often use is `useDebouncedValue`.
Check the ALT on the image to copy the code.
#techtweets #day170
One of the useful hooks I often use is `useDebouncedValue`.
Check the ALT on the image to copy the code.
#techtweets #day170
April 29, 2025 at 6:23 PM
You can use React Hooks to apply simple and usual behaviors to your code.
One of the useful hooks I often use is `useDebouncedValue`.
Check the ALT on the image to copy the code.
#techtweets #day170
One of the useful hooks I often use is `useDebouncedValue`.
Check the ALT on the image to copy the code.
#techtweets #day170
In TypeScript, the best way to defined an Object type is to use the `Record` utility type.
It will force you to specify the right type for the key and for the value.
#techtweets #day168
It will force you to specify the right type for the key and for the value.
#techtweets #day168
April 29, 2025 at 6:23 PM
In TypeScript, the best way to defined an Object type is to use the `Record` utility type.
It will force you to specify the right type for the key and for the value.
#techtweets #day168
It will force you to specify the right type for the key and for the value.
#techtweets #day168