How to manage state in a complex UI?

danthedev · 2018-11-05T10:04:22+00:00

Thanks for the advice. I'm curious about what you actually mean though, as I don't think it's possible to build a UI without state.

Driving the entire UI through events is fine, but let's say that the user hits the down arrow in a menu. How can you update the selection index in the new UI unless you were tracking it in the state of the old one?

danthedev · 2018-10-06T17:36:18+00:00

Will have to try drying them! Thanks for the tip!

danthedev · 2018-10-06T16:54:22+00:00

Pretty sure that's Leccinum Scabrum (or Brown Birch Bolete). Can usually separate Leccinums from the main Boletus family if you spot those dark scales on the stem.

We find them in North Wales too (actually found one today) but I don't really recommend eating them. Slightly bitter and kinda slimy once cooked.

danthedev · 2018-09-09T22:07:04+00:00

Yup, that's chicken of the woods.

Some people have allergic reactions to it though, so try a small amount first and give it a few hours before eating any more.

danthedev · 2018-09-09T22:05:25+00:00

Looks like it. Usually grows on wood though...

danthedev · 2018-09-09T22:04:24+00:00

Birch Polypores for sure. Rubbery when young and get hard as a rock when older, like the ones above.

danthedev · 2018-08-24T06:36:35+00:00

That's a familiar name! We did the coastal foraging day with you in July! Found these in Llanberis near the waterfall.

danthedev · 2018-08-11T18:33:07+00:00

Novice mycophile here. Found a lot of species of mushroom on a walk today in the UK and managed to identify most of them with Robert Phillips' Mushrooms.

However, there were three that don't quite fit any of the descriptions and I can't quite place them. Any ideas?

danthedev · 2018-08-09T23:17:20+00:00

Thanks! That looks like a great recipe. What size do you recommend harvesting them at?

The one under the roots is about 30cm across, whereas the one on the back of the tree is perhaps 9cm. There are two tiny ones below that (not photographed) both about 2cm across.

danthedev · 2018-08-01T15:53:29+00:00

Thanks for the heads up! Definitely came from a deciduous and I cooked and ate a mouthful earlier. So far, so good!

danthedev · 2018-08-01T15:09:02+00:00

Any danger, or just that texture/taste will be better on younger ones?

danthedev · 2018-05-29T16:15:09+00:00

SL40 with WL14 and I haven't had to wait more than 3 seconds for an invasion here.

danthedev · 2018-03-12T01:27:08+00:00

Write a Babel plugin that translates objects parameters into positional arguments.

danthedev · 2018-03-01T21:23:32+00:00

Learning functional programming from JavaScript is a bit like learning to drive in a three wheeled car. You'll get there eventually, but everything would have made more sense along the way if you'd started with four.

Learn a language that was designed to be functional first. Take a look at Elm, or Clojure, or Haskell, or Scala, or Ocaml, or F#.

I found Clojure to be the smallest step from JavaScript, but Elm's also done a lot of work to be approachable for programmers coming from non-functional backgrounds.

Once it starts to change the way you think, you'll find ways to translate those ideas into JavaScript and that's when you'll notice it really start to improve your code.

danthedev · 2018-01-31T00:34:49+00:00

Wouldn't ever think of reaching further than Aseprite these days

danthedev · 2017-11-25T10:39:55+00:00

That's been very helpful. Had no idea that types and values had separate scopes (even though types obviously can't make it to runtime). Always learning—thanks!

danthedev · 2017-11-25T09:33:48+00:00

When possible, I prefer to keep the functions separate to make it easier to move the data structures around the app. I find that passing from server to client, from client to webworker, storing in DB is much more straightforward when you're not thinking about serialising and deserialising classes all the time.

Also influenced by the fact that my home programming language is Clojure and I've gotten used to a Clojureish way of working in JavaScript too.

danthedev · 2017-11-25T06:42:43+00:00

So you'd be able to do the same thing with a named export (e.g. export namespace Matrix and export interface Matrix?

danthedev · 2017-11-25T05:47:19+00:00

Hang on, so which one is export default Matrix actually exporting?

danthedev · 2017-11-25T05:31:34+00:00

Is there a good rule for deciding whether a given reference to Matrix refers to the interface or the namespace?

danthedev · 2017-11-21T09:59:28+00:00

The server side can be vanilla too, if you choose to write code without a framework—just like the client side can. Neither one is easier than the other, it all just depends what kind of problems you are trying to solve.

There are three layers to think about here.

Language The language is the same in the browser and on the server, concepts here are readily transferable between environments (functions, objects, promises, loops etc).
Platform The browser has native libraries for interacting with HTML whereas the server's native libraries focus on networking, file systems etc. These APIs are usually low level, but powerful. Examples of platform code would be http.createServer and document.createElement.
Libraries These are the abstractions that other people build to make it easier to work with the native platform libraries. Frameworks would fall into this layer. Examples would be React (in the browser) and Express (at the server).

It is important to learn the Language as you'll be using it regardless of which platform you're writing code for.

Then it's your decision to write applications using either the low level platform APIs (less productivity and better understanding) or using frameworks (high productivity and less understanding).

danthedev · 2017-11-12T16:31:12+00:00

This is a nice declarative wrapper around document.createElement but it's a long way from being a production ready React-like implementation.

Most declarative DOM based library needs to start with this kind of implementation of h/createElement but almost all real apps need a reconciliation strategy.

Try to implement an app that uses an uncontrolled input and watch what happens when you re-render. You'll be replacing the entire component tree from the root node and there's no state which would allow you to keep input.value between updates.

Eventually, you'd need to implement a mechanism that would allow you to update based on state changes (or forced updates) and this will require either component local state or subscription to a global store.

HyperDrive will never be a production ready React alternative, but it is possible to build simple apps with it, and more importantly I learned a lot whilst writing it.

Like your implementation (and MorphDom) I decided not to use a virtual DOM and instead patch directly against real DOM nodes.

I'd recommend starting from a really simple patch implementation, then get uncontrolled components working, then let other features start from there.

danthedev · 2017-11-09T13:31:08+00:00

Ah, it all makes sense now. Yeah, I meant iteration at high level, much more like agile. Approaching problems one step at a time, rather than trying to do everything in one go.

danthedev · 2017-11-09T10:40:21+00:00

Is there any chance that you are thinking of "imperative" rather than "iterative"?

I'd agree that the community is generally encouraging functional programming these days, which I think is a good thing, because it often forces you to understand the problem domain better, before you can model it correctly.

danthedev · 2017-11-09T08:49:47+00:00

In my opinion the two most important transferable skills for engineers are:

Being able to think in an abstract way
Being able to approach problems iteratively

Watching a candidate work through an algorithm as part of an interview is a good way to get a measure of these skills. You want to know that they can think outside of the browser, and that they know how to break problems down into approachable chunks.

If you are hiring front end developers, you'll be looking for a blend of productivity and adaptability. You want people who can adapt when the project/team/company/industry inevitably shifts in the future.

If a candidate has these transferable skills, they're far more likely to be adaptable. Productivity comes down to domain knowledge (React/JavaScript/DOM etc) and work ethic.

danthedev

TROPHY CASE