hjertnes.blog

#

15.12.2017 01:00

Anyone getting a iMac pro?

JSX

15.12.2017 01:00

JSX is the syntax we use to define markup with React. It combines Javascript code and markup together in a very flexible and powerful way and is without doubt my favourite thing about React. Everything you use in JSX that isn’t Javascript code, is technically components. All HTML tags are implemented as Components in React. For example the h2-tag is a h2 component inside the React package, with the appropriate params defined to a HTML attribute; note: they are not always the same though.

Everything that you wrap in HTML tags (either self closing or not) are components and everything inside curly braces are javascript code.

For example:

https://gist.github.com/hjertnes/6a858c42a5674e8e93b4d8d0bcae3e84

That would be a common starting point for a simple React app.

I personally think that JSX is the first templating system I have seen that is powerful, without adding a lot of syntax that isn’t plain Javascript and HTML. Most other ways to template I have seen almost turn it into a language of its own that let you combine code and markup.

The great thing about this is that almost everyone gets it straight away.

#

14.12.2017 01:00

Had this years last day at work yesterday. What’s the first thing I do when I get home? Started installing Arch Linux on my “new-old” Thinkpad.

#

14.12.2017 01:00

Today is the day where I start to clean up in the 1TB black hole I’ve been throwing stuff into for way too many years (aka Dropbox)

React

14.12.2017 01:00

https://gist.github.com/hjertnes/57e3a388dc029dbdc64cbd4ee8418d2b

This is a typical Hello World implementation in React. It shows one of two ways you can write components, and how you pass data to a components. Most React Components are written as classes Extending from the React.Component class, and the only method a component have to implement is “render”. It returns either a new component or markup.

One side note: a component have to return one root node. For example:

https://gist.github.com/hjertnes/0c4b22d22cd75c9276b9c36309cdbd4c

What React is, and how it is different.

13.12.2017 01:00

We often compare React, Angular and Vue. I get why. But it isn’t the best. Because both Vue and Angular are more complete solutions for building web apps, while React are just a library for dealing with the user interface part of it. And leave other things like communicating with API’s, routing and global state to others.

The bad thing about this approach is that you need to learn more, and there are no “standards”. But the good thing about this is that you can chose the best option for what you are building, and only increase the complexity as you need it.

React is based on components instead of a variant of the well known MVC model. In a MVC model you have the model (data), the interface (view) and the controller; the controller is the one that controls everything and are doing the work. A component based system on the other hand is based on the idea that you make many small components that are fully independet and combine them to build what every you are building, They can be pure UI components or pure wrapper components; or a combination. A wrapper component is a component with just logic.

The biggest difference between the two from a practical stand point is the structure. A MVC system does a lot of the organisation for you, but makes it harder to re-organise everything. When you use React you typically start with a single file, then you divide it into different files and slowly make it more complex as you need it.

That means that the the structure rarely is more complicated than it has to be.

#

12.12.2017 01:00

hjertnes/op-cli. I’m working on a wrapper around the 1password cli.

#

12.12.2017 01:00

Got my Pilot Metal Falcon today. First thought: why doesn’t the Vanishing Point have this converter?

Learning React now and then.

12.12.2017 01:00

When I started to learn react in 2015 I thought it was a challenge. Not because react itself is difficult, but because there was a lot of stuff surrounding it one had to know. It kind of reminded me about when I started to do web development back in the stone ages. “You need to know html, css, javascript, php, mysql, apache cookies”. And I just understood that I should learn all of it, without understanding what everything was or why I had to learn it.

The short version is that the react community is very good for better an for worse to use the bleeding edge of new Javascript features, even when they are in drafts stages. But I wasn’t familiar with all of the new ES6 features when I started to learn React. And when you finally understood what was going on, then you had to learn how to get webpack or browserify up and running. Looking through a million different config files trying to find a config that works.

What I recommend that you do today, if you want to learn React is to start with “create-react-app”. It is a very good package for starting a new react app without having to worry about anything but react. You might still want to learn how to configure webpack, but I don’t think you need so unless you have some particular needs or have a larger app. I have deployed smaller apps into production using create-react-app.

#

11.12.2017 01:00

Lightroom CC has the essential options, where the old Lightroom had options for every single possible thing imaginable. For example the old “export” have been replaced with a “Save To” with three options File Type, Location and Size. But my impression is that it is much slower than the old export.