Bruno Sabot
@brunosabot.bsky.social
Just posted about why I created the Streamline Card for Home Assistant and how it works! My goal? A cleaner, more intuitive HA UI. Check out my thoughts and the card itself here:
medium.brunosabot.dev/streamline-y...
medium.brunosabot.dev/streamline-y...
Streamline Your Home Assistant UI with Streamline Card
Reduce Lovelace repetition, create dynamic dashboards, and manage your configuration efficiently with this modern templating card.
medium.brunosabot.dev
April 28, 2025 at 5:37 PM
Just posted about why I created the Streamline Card for Home Assistant and how it works! My goal? A cleaner, more intuitive HA UI. Check out my thoughts and the card itself here:
medium.brunosabot.dev/streamline-y...
medium.brunosabot.dev/streamline-y...
`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
`git config --global --add --bool push.autoSetupRemote true`, starting Git 2.37.0, will automatically set the up the upstream branch, and will save you from `git push --set-upstream origin feat/awesome-feature`
#techtweets #day196
#techtweets #day196
April 29, 2025 at 6:25 PM
`git config --global --add --bool push.autoSetupRemote true`, starting Git 2.37.0, will automatically set the up the upstream branch, and will save you from `git push --set-upstream origin feat/awesome-feature`
#techtweets #day196
#techtweets #day196
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
Get the current branch name of a git repository in a single command: `git rev-parse --abbrev-ref HEAD`
It can give you superpowers when creating a shell script.
#techtweets #day190
It can give you superpowers when creating a shell script.
#techtweets #day190
April 29, 2025 at 6:25 PM
Get the current branch name of a git repository in a single command: `git rev-parse --abbrev-ref HEAD`
It can give you superpowers when creating a shell script.
#techtweets #day190
It can give you superpowers when creating a shell script.
#techtweets #day190
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
With facades, you can improve your page performances: by loading a lite version of a third party script -such as YouTube, Twitter, and more-, you can lower the initial load time of the page.
Learn more on#techtweets #day187
web.dev/third-party-fa…
Learn more on#techtweets #day187
web.dev/third-party-fa…
Lazy load third-party resources with facades | Lighthouse | Chrome for Developers
Learn about the opportunities to lazy load third-party resources with facades.
web.dev
April 29, 2025 at 6:24 PM
With facades, you can improve your page performances: by loading a lite version of a third party script -such as YouTube, Twitter, and more-, you can lower the initial load time of the page.
Learn more on#techtweets #day187
web.dev/third-party-fa…
Learn more on#techtweets #day187
web.dev/third-party-fa…
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 `
Find files (and lines) where a specific text is in tracked files with git grep:
`git grep --heading --line-number 'text to find'`
--heading will group lines by file
--line-number (or -n) will show... line numbers.
#techtweets #day184
`git grep --heading --line-number 'text to find'`
--heading will group lines by file
--line-number (or -n) will show... line numbers.
#techtweets #day184
April 29, 2025 at 6:24 PM
Find files (and lines) where a specific text is in tracked files with git grep:
`git grep --heading --line-number 'text to find'`
--heading will group lines by file
--line-number (or -n) will show... line numbers.
#techtweets #day184
`git grep --heading --line-number 'text to find'`
--heading will group lines by file
--line-number (or -n) will show... line numbers.
#techtweets #day184
With today's tweet, I'm officially starting the second half of the tech tweets year: 183 done, 182 to go.
It's getting harder to find new topics, so I hope you still like the content!
It's getting harder to find new topics, so I hope you still like the content!
April 29, 2025 at 6:24 PM
With today's tweet, I'm officially starting the second half of the tech tweets year: 183 done, 182 to go.
It's getting harder to find new topics, so I hope you still like the content!
It's getting harder to find new topics, so I hope you still like the content!
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
There is a new way to make your browser to preload data: you can use the early hints HTTP response.
You will provider the browser a first response with files to load while generating the page.#techtweets #day181
developer.mozilla.org/en-US/docs/Web…
You will provider the browser a first response with files to load while generating the page.#techtweets #day181
developer.mozilla.org/en-US/docs/Web…
103 Early Hints - HTTP | MDN
The HTTP 103 Early Hints informational response may be sent by a server while it is still preparing a response, with hints about the sites and resources that the server expects the final response will link to. This allows a browser to preconnect to sites or start preloading resources even before the server has prepared and sent a final response. Preloaded resources indicated by early hints are fetched by the client as soon as the hints are received.
developer.mozilla.org
April 29, 2025 at 6:24 PM
There is a new way to make your browser to preload data: you can use the early hints HTTP response.
You will provider the browser a first response with files to load while generating the page.#techtweets #day181
developer.mozilla.org/en-US/docs/Web…
You will provider the browser a first response with files to load while generating the page.#techtweets #day181
developer.mozilla.org/en-US/docs/Web…
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