hjertnes.blog

Superstruct

26.01.2018 01:00

I stumbled upon this GitHub project a few days ago. It’s called Superstruct, and it looks like an awesome way to validate data in Javascript.

Let me explain. You probably want to make sure that you get the kind of data you expect as input in Javascript, either from your backend API or validating the data that comes as body in your API. But doing so by hand can be very cumbersome. And I thought adding something like TypeScript is a little bit heavy handed.

Superstruct is a simple but compassable way to validate some object, you can add simple values or more complex validation code. And it throws and error if there is any issues with the data.

#

25.01.2018 01:00

```text ```

```text ```

Let’s see how this looks.

#

25.01.2018 01:00

[@belle]1 checked out the podcast a few days ago. It’s awesome!

#

25.01.2018 01:00

2017-12-11

```text ```

Grainy as fuck, but a great black and white film.

2017-12-31

```text ```

My analog kit. Nikon FM and Series E 50mm f/1.8

#

25.01.2018 01:00

Picked up the diploma for my philosophy bachelor today, because going to the actual graduation sounded like torture. And it took me six months to pick it up, because I care more about the journey than the destination.

I’m still proud of the B I got in Wittgenstein studies though.

#

25.01.2018 01:00

Onward for The Cramped – The Cramped

I don’t post things for the sake of posting things to keep you “engaged” with our “content”.

Optimizing React-Redux

25.01.2018 01:00

If you need to tune React performance, I would guess, that most of the time it will be about render time. And there are many ways to deal with that. The basic idea is that you want to make sure you don’t do it too much, while still doing it when data change. My experience is that it is more about just re-rendering once when something change.

The best place to start is to make sure you use PureComponent instead of Component as a base for all of your components. And then make sure you connect your data from redux just where you need to. This means that you add the data exactly where you need it, and that you don’t send more data than needed.

And then I’d take a look at the following methods options in react-redux.

The react-redux Documentation:

When options.pure is true, connect performs several equality checks that are used to avoid unnecessary calls to mapStateToProps, mapDispatchToProps, mergeProps, and ultimately to render. These include areStatesEqual, areOwnPropsEqual, areStatePropsEqual, and areMergedPropsEqual. While the defaults are probably appropriate 99% of the time, you may wish to override them with custom implementations for performance or other reasons.

It will be overkill to do much with it in most apps, but all of the methods mentioned above containing “Equal” can be very useful to make sure that you only trigger updates when you need to. But don’t do it just to do it; the result will almost always be worse than the default. And tuning this kind thing is only for very special corner cases.

Testing Out Sunlit

25.01.2018 01:00

2017-11-04

```text ```

2017-11-11

```text ```

2017-11-12

```text ```

#

24.01.2018 01:00

React Fragments.

24.01.2018 01:00

As React have developed over the years, they have slowly removed redundant nodes from the HTML that React renders. For example, when I started something like this {this.props.value} would be wrapped with spans by React.

One of the awesome additions to React 16 was fragments, I think it went past most of us, because we were too busy testing out the new ErrorHandling and performance improvements.

Fragments solves a very pressing issue that most React developers will meet sooner or later. Every component only returns one root component. That means that you have to wrap a lot of stuff in unnecessary divs or spans to meet this requirement.

You can now wrap anything that you previously wrapped in divs just because of “React Reasons”, in either <> and </> or and .

The result is that you can have just one root element, without adding unneeded nodes to the dom.