Author | Lightnews

Bruno Sabot

Bruno Sabot

@brunosabot.bsky.social

12 followers 34 following 500 posts

Posts Media Videos Starter Packs

Bruno Sabot @brunosabot.bsky.social · May 1

Good vs Great Animations.
Worth reading post from Emil Kowalski.
emilkowal.ski/ui/good-vs-g...

Good vs Great Animations

Practical tips on how to go from good to great animations.

Bruno Sabot @brunosabot.bsky.social · Apr 28

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...

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

`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

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

You can use intersection types to extends an existing TypeScript type.

It is useful to reuse and factorize some pieces of definitions.

#techtweets #day198

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

`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

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

High order component add a generic behavior to a component.

It can be helpful to wrap an element with a descriptive tooltip.

#techtweets #day194

Bruno Sabot @brunosabot.bsky.social · Apr 29

You can load polyfills with the `nomodule` attribute: modern browser will ignore the script while old will not understand the `nomodule` attribute.

#techtweets #day193

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

`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

Bruno Sabot @brunosabot.bsky.social · Apr 29

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…

Lazy load third-party resources with facades | Lighthouse | Chrome for Developers

Learn about the opportunities to lazy load third-party resources with facades.

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

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 ``.

#techtweets #day185

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

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!

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

Let's do that

Bruno Sabot @brunosabot.bsky.social · Apr 29

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

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…

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

Bruno Sabot @brunosabot.bsky.social · Apr 29

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