Hjertnes.blog

Routing

January 19, 2018

The heart and soul of a Single Page Application.

A router in React maps different components to different urls in different parts of your UI. Most people use it to control the content of their content area. But you can also use it to change the menu items and other parts of your UI based on the url.

The most popular one is called react-router. React Router works fairly well, even though their latest version was a little bit controversial. Or you could use my friend Asbjørn’s router, I have used it a lot in the past.

I used to use the latter when I started. Because it was easier to hook up. But these days I use React Router. Most of it is good, and it is very flexible for large apps. And you have different versions of it for different uses. Everything from regular routing, to hash to react native. And also a redux version that I think it awesome.

#

January 18, 2018

I’ve been shooting with both my x100t and my X-Pro 2 today. I prefer the X-Pro 2 in almost every way. Don’t get me wrong the x100 is awesome. But I prefer some of the more advanced features of the X-Pro 2. And, while I appreciate how quiet the leaf shutter of the x100 is, I prefer the clunk of regular one.

I need to get me one of those 23mm f2 lenses though, because while I prefer the 35 most of the time, the 23 is awesome when you are very close on what you want to shoot. A 50 is good when you want to chose what to include, while a 35 is awesome when you just want as much as possible of it, without it being too much.

Hiding or removing

January 18, 2018

Let’s use a simple tabbed interface as an example. Should you hide and show the different interfaces that represent the different tabs or should you remove and add them between changes?

You have two different approaches to solving this, you could either hide and show the content based on which tab is open, or you could remove the old tab when the user opens the previous one.

There are pros and cons to each one.

The good thing about the show and hide version is that it is really fast to switch between the two, but the bad thing is that it requires more time to load the first time and the browser could use a significant amount of memory of you have a lot of tabs.

The good thing about the add and remove approach is that you use a minimum of resources and you load fast. The bad thing is that it takes more time to switch between tabs, and you need to take into consideration to ask users if they want to save, if they are trying to switch tab in a dirty state.

#

January 17, 2018

I’m not reinstalling the Slack app.

#

January 17, 2018

My favourite OS X hacks: map caps lock to shift and hiding desktop icons.

#

January 17, 2018

Installed the new firmware for my X-Pro 2 last night. It’s kind of weird that they actually add new features and improve the existing ones. Canon would never do that, and Sony would just release a new camera.

#

January 17, 2018

Weird thought.

What if Amazon combined their recommendation engine with photo hosting and a dating service?

#

January 17, 2018

I’m not sure if I’m going to re-configure Spark, after my OS X re-install. I’m going to stick with webmail for a while.

Component Design

January 17, 2018

How you design your components will affect a large number of different things, everything from performance to how maintainable your code is. It will never be perfect, and don’t try to get it right form the start. It will just kill your productivity.

Use PureComponent instead of Component as your base class, it will limit the number of re-renders and therefore improve your apps general performance. And learn how to develop using many small components instead of fewer large ones, because then the browser will spend much less resources on rendering. If everything is in one large render function (aka a component) then your browser will run through all of it every time something change, but it will only have to run through a smaller part of it if you have divided it into many smaller components.

Smaller components are also usually easier to make re-usable.

#

January 16, 2018

“fucking snow…”