Month: April 2019

React Finland :D

React Finland :D

2nd year at React Finland, almost underway but what a bonus I’ve had so far!
I will be tweeting (@_delp_) live from the event and all going well covering all the best bits – which hopefully will be quite a lot.

It’s almost underway, but even before the conference has started I’ve been to a meet up at Smartly.io where there was a great talk about on Micro front ends. Same thinking as mirco services, but for the front end – makes sense, yes!

Had a workshop day yesterday which quite literally flow past with NikkitaFTW Some great insights into cutting down payloads and start up times. Perhaps best piece of information came in chunk on Service workers.

Service workers are dangerous – yet powerful!


https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injectmanifest_plugin_1

Reaktor

Yeahhhh, they host a great meet up.
Check out the food on offer. Chatting for many hours to dev’s from all over Finland, Canada, France and even Vietnam!

React Finland ReactJS

And of course it wouldn’t be Finland without have a drink or two in the sauna. They love sauna here – and why not!!! The world needs more of them.

Getting back into my Blog

Getting back into my Blog

Given in the past 3-4 years I’ve only put up around 3 or 4 posts I’m going to try and get back into posting useful information. This may well repeat things others have said, but it will be in my way.

Everyone has there own take on knowledge, so hopefully folk will find this helpful. In the early days of this blog I know it was viewed by many Flex developers. At one point it was pretty popular! But as we all know Flex is dead (still awesome and better in many ways than even the latest JS, but lets not go there…)

What’s my first topic going to be?

Destructuring/Rest/Spread

Why? well as I pick up ES6, I’m seeing many ‘funky’ and neat techniques which takes me a few reads to figure out what is exactly going on.

So if you want to find out more check back and hopefully I’ll have something worth reading!

Here is the first one –
http://www.kennethsutherland.com/tips/clever-code/

[the_ad id=’1311′]

Clever Code

Clever Code

Getting into JS and come across code that many will consider ‘clever’ code. Is this code that is unreadable or is it the features that the language provides? I’m not really going to get into that discussion here – this post will hopefully instead help show and explain what is going on with such code. So should you see it then you’ll be able to understand what is going on and maybe even use it yourself.

const selective = [
    { id: "firstObjectId", ...obj1 },
    { id: "secondObjectId", ...obj2 },
    ...(obj3 ? [{ id: "thirdObjectId", ...obj3 }] : [])
  ];

What’s the aim of this code?

The aim of the above is to inject an ID into every object and at the same time it will only return two items if obj3 does not exist, and 3 if it does.

Why?

You may wish to combine a series of requests and sometimes you expect one of the requests to come back with nothing. If it does then there will be no need to return the 3rd element as an empty object – just drop it.

Explanation

Part 1 – What is { id: “firstObjectId”, …obj1 } doing? It’s taking the values from obj1, spreading them into another object while at the same time including an ID value. So it’s a new object with an ID as well as everything that was inside obj1 to start with.

What about …(obj3 ? [{ id: “thirdObjectId”, …obj3 }] : [])
Well if obj3 exists then it’s the same as the previous lines.
If it doesn’t exist then the line of code is

const selective = […([])]
which is

[…[]]

As the array is empty the spread operator will take nothing out of an empty array which leaves an empty array!
So we combine that with with the other spread objects and we now have a neat means of checking if an object exists and only if it does then include it in a returned item.

Old School

If this were in old school code it would look something like this

const returned = [
{ id: "firstObjectId", ...obj1 },
{ id: "secondObjectId", ...obj2 },
];
if (obj3) {
returned.push({ id: "thirdObjectId", ...obj3 });
}

So you are including an ‘if’ and then pushing the item into the array. Not quite as elegant!