Author: admin

React Finland – post conference breakdown

React Finland – post conference breakdown

By | | Comments 0 Comment

Time flies on, can’t believe its a month already since I attended the React Finland conference for the second time. Yes a second time, I took a fair amount away from the first one, so when I had the chance to go back again I definitely took that chance.

So why?

Friendly

Programmers and techy folk aren’t exactly the most chatty people, so when you are traveling on your own you’re always wondering how it will go. Will it be a case of turn up, enjoy the various talks then head back to your hotel after speaking with no one?

Nope, not here, at least not from my experience. Of course you need to be willing to speak to people, but the set up was great. Breaks long enough for people to grab a wee snack/drink and also visit the sponsors lounge area to chill.

I’ve been to enough conferences to know this isn’t easy to pull off. For example the ones in say London – complete opposite!

Sponsors chill out area
Sponsors chill out area – look at everyone talking! 😛 (They did actually)

Evening events

So you’ve a super friendly crowd and now they organise evening events.  For example after the workshop day a sizeable number of people headed over to one of the sponsors offices – Reaktor. I met with some great people and discussed lots of ideas, work and non-work topics. Had some friendly banter, food, drink and of course the obligatory Finnish sauna. Top hosting by Reaktor, again this was the same experience I had the previous year as well when I visited the Fraktio offices.

Reakor office chill out area

After day one of the conference, there was a comedy night. Yip comedy, in the same hall as the talks – and you know what it was actually rather good 😊 

Then you have the main after party event on the evening that the conference finished. Nothing too fancy, hall, food, music, drink.  Time to wind down, relax and cement some of the friendships that were made over the previous days.  Of course all these events just make the whole experience very enjoyable. Learning, sharing, and enjoying yourself at the same time.

BONUS

Due to the time it takes to get from Scotland to Finland I turned up a day early, no way I could have turned up on the Wed morning. Couple of weeks before (yes could have been arranged earlier but this wasn’t really part of the official conf) got the announcement that there was going to a pre-conference meet up! Great. It was held in one of the local companies offices, and maybe because it was unexpected, I thoroughly enjoyed it and it contained the talk that matched my company/team/project layout the most which made it the most appropriate. Getting into the mood of learning from others experiences. Only two talks, but both very good, especially the one from Smartly. Think it shows what the overall scene in Helsinki (Finland) is like. Very professional and well set up.

Bonus 2!

The organiser (Juho) had set up a slack channel for those wanting to meet up outside of the conference, to see a bit more of Helsinki if they wished. So on Sat after most people had left and flown home myself and Juno took a stroll around one of Helsinki’s nature reserves. Beautiful, weather really played its part and if anything was a tad hot for my liking – yes really. To hot in Helsinki! Never thought to bring shorts with me.  If you wish to see what it’s like I’ve got an album of just the walk – https://flic.kr/s/aHskQQsHuk. We must have walked 26-28km during the course of the day.

Squirrel

But what about the conference???

Sure, so I enjoyed myself, but that’s not the point of going to the React conference.  Well the conference didn’t disappoint either. The schedule for the two days were split into themes, so that you got back to back talks on say architecture, accessibility, styling, testing etc. Of course not everything will please everyone, so should you have had zero interest in styling/css then you headed out, had a shoulder massage, played some games in the sponsors lounge and had a chat with the sponsors or other attendees. Then you could find out about things like the micro satellite that they (think it was Reaktor) fired into orbit to photograph the forests! 
Think other than one talk, I stayed in and listened to every one of them and I’m glad I did.

Top talks for me –

Now for the ones I’ve not listed, doesn’t mean I didn’t like or didn’t take anything from them. Most were very good, only a couple I wasn’t keen on.  The above were the ones where I took something from and then able to use in my day to day role.

Was anything not so good?

Yes, unfortunately there was.  The workshop I attended wasn’t what I thought it was going to be and it was a super rushed course that finished approx. 1 ½ hours earlier than it was meant to. There was perhaps a reason for this in that the original trainer had to pull out, but the description of the course didn’t quite fit in with my expectation. https://react-finland.fi/workshops/#advanced-performance-tuning-for-react-applications  I was hoping for some performance tuning around the running of the application. Spotting common issues, what’s making items re-render needlessly, what takes up the most processing time, bad and good practice when dispatching events, that sort of thing.  The actual course was around start up time and getting the existing starter app down from say 4MB to a handful of KB’s.  For me, that’s not so much of an issue. Working only with internal customers I’ve never yet heard anyone ask for something to be smaller or faster at loading.  Sure we shouldn’t bloat our apps, but I’m not creating web pages so no one really cares. It did cover lazy loading and Service Workers which was great as well as other topics that I could take away.

So not a bad course and I did learn from it, just not what I expected and definitely too rushed. Unless you were very quick at touch typing, so you could watch the trainers screen and type at the same I don’t think you’d have been able to keep up.

Will I be back?

Sure hope so! I hear that the plan is to have two days of workshops! Sounds good 🙂

React Finland :D

React Finland :D

By | | Comments 0 Comment

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

By | | Comments 0 Comment

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

By | | Comments 0 Comment

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!

TS1153: let declarations are only available when targeting ECMAScript 6

TS1153: let declarations are only available when targeting ECMAScript 6

By | | Comments 0 Comment

Are you using trying out Typescript for the first time and getting the error “TS1153: let declarations are only available when targeting ECMAScript 6” when trying to declare variables with the “let” statement?

Well you need to update to a more recent Typescript version – thankfully its very easy (if you have npm installed) 🙂

1) Open command window and type “npm install -g typescript” (without the quotes). This installs latest stable version.
2) Take note of the install directory which is displayed in the command window
3) Open Intellij settings -> Languages & Frameworks -> Typescript -> compiler version
4) Change that to the lib folder of the typescript install directory.

That’s it 😀

Typescript examples – is there any really good ones?

Typescript examples – is there any really good ones?

By | | Comments 0 Comment

Learning something new is never simple – but really doesn’t help when there seems to be a huge lack of good examples.

Anyone have some proper good examples, feel free to put it into the comments.

What I’m meaning is code examples like the below –

var index = 0;
var array = [1, 2, 3];
for( let index = 0; index < array.length; index++ ) {
    console.log( array[index] );
}

console.log( index ); //0

Now while there is nothing wrong in the above, for those wishing to learn Typescript and how to do it properly it should really be this –

var index : number = 0;
var array : Array = [1, 2, 3]; 
//This makes array[0] = "bob"; give a Typescript error as you can't put a string into a number type
var arrayLength : number = array.length;
for( let index : number = 0; index < arrayLength; index++ ) {
    console.log( array[index] );
}

console.log( index ); //0

See – give those var’s types! its the point of Typescript…
I’ve not even seen good examples on the Typescript site!

Desktop backgrounds – Random non code post

Desktop backgrounds – Random non code post

By | | Comments 0 Comment

Yet again I give my blog so little time, but during my coding I see my desktop wallpaper which I think is dead nice – well I did take the picutres 🙂

So I’ve bundled some of them (13 images) up into a theme pack for windows machine –

Thistle at Ben Lawers
walk through Ben Lawers national nature reserve

Garbh Uisge Mor (NE of Ben Macdui)
Garbh Uisge Mor (NE of Ben Macdui)

If you like that sort of pics them feel free to grab the theme and use it. themepack link
If you really like it you can follow my pics on Flickr
IF YOU REALLY like then 🙂 then you can even buy them!!! (only just start putting some up on to Redbubble so not many yet – need to get my walking shoes on a bit more) Redbubble

These were just taken as part of my drive to get out from my desk… so enjoy and feel free to comment and share if you like 🙂

Double click the theme pack download file and windows will do the rest.
Then go to your Control PanelAppearance and PersonalizationPersonalizationDesktop Background then tell it to ‘FIT’ and not ‘FILL’ as that’s what seems to be the default setting.
fit

[ad name=”ad-1″]

Email settings with a Buffalo linkstation NAS

Email settings with a Buffalo linkstation NAS

By | | Comments 0 Comment

So I got myself a new Buffalo Linkstation for backing up a heap of data and part of its software features give you the option to send an email in case of hard drive errors or failure.

Fail, Fail, Fail again…

Well going through the options and trying every possible combination failed.

Double checked email ports/passwords/auth settings etc with my mail client settings and with the Godaddy help – nothing worked. Every test email failed.

Eventually I figured it out so thought I’d put this post up as it was a really simple solution – DO NOT EMAIL YOURSELF.

So I was sending the email from say [email protected] and sending it to [email protected].

This failed to send! No idea why but it did. After a while I decided to send it to another of my emails at a different domain – [email protected]. THIS WORKED!

I then added both email addresses to send to – [email protected] and [email protected]. This also worked.

Most odd, but hopefully this will help someone trying to figure it out.

Sencha Touch books – Cookbook

Sencha Touch books – Cookbook

By | | Comments 0 Comment

I started to look into Sencha touch ‘seriously’ about a year ago.  Having spent a short while on it about a year ago with the intention of doing a lot more – but as ever time flies on by. I now have 3 Sencha touch books and I’m getting my head back into Touch (and Ext JS) so thought I’d review the books to advise how good or not they are.

The first one is the new Sencha Touch Cookbook 2nd Edition. I may be an experienced programmer with Flex/Actionscript but when it comes to Touch I’m definitely a newbie. So if you are looking to learn Touch then you’re probably in the same boat as myself. So is it worth getting or not? That is pretty much the main question and from what I’ve gone through I’d say YES – if you’re a beginner or maybe even an intermediate that is.

Why?

Well if like me you can’t stand config and you want to get into the code as soon as, then the initial part of the cookbook comes with some of the following

  • Setting up the Android-based development
  • Setting up the iOS-based development
  • Setting up the Blackberry-based development (not quite sure how useful this will be now 🙂 but its there anyway)
  • general config and detecting features

It also shows you how to set up for tools such as Eclipse and running the code in a simulator. Again if you’re new then this will save so much time as config can be hit or miss when you’re not sure where to start and just wish to get going.

What I did find odd was that at the start of every recipe it had a ‘Getting ready’ section that pointed you to chapter 1 to get things set up.

Most of the recipes did have a ‘How it works’ part which focused on the parts of the code which make that particular recipe work and on the whole they add to the learning from the book. As an experienced programmer I know that there is more to code that just writing small snippets that do stuff and I’d have liked to see some best practise code examples. When doing something new its all to easy to get into bad habits because it works and next thing you know you have spaghetti and unmaintainable code! Sencha have created a great way to write Javascript in a OO way that helps you keep it organised and structured, so it would be great to see a few good/bad examples highlighting the common mistakes that developers make. But I suppose that sort of guide might not necessarily be for a cookbook.

For a recipe book it covers a fairly wide range of topics. Charts, videos, offline storage, Google maps, taking a picture, XML etc so it covers a large enough amount of topics to help you get started.   Overall its a recipe book, so its code is short snippets that doesn’t  really need to show best practise but it does show you how to do things.  So what I found myself doing was flicking through some of the examples in the book then I went to get a more in depth explanation elsewhere.

Conclusion

I liked it, but its not the only book that you will need should you wish to get into Sencha Touch, but certainly worth getting alongside a reference book.
Sencha Touch Cookbook 2nd Edition

 [ad name=”ad-1″]

Ext.ComponentQuery.query or Ext.getCmp

Ext.ComponentQuery.query or Ext.getCmp

By | | Comments 3 comments

When you start with Sencha touch, one of the first things you have to find out is the difference between the following.

Ext.ComponentQuery.query or Ext.getCmp?

Well both do a similar task and yet both are very different. When using them in your Sencha App they will return an item from the visual onscreen assets depending on the parameters you give it.

Same, but different.

Ext.getCmp

will return you an item matching the id you passed it. This will be the fastest method to return an item. All items when created with an id are registered in a single object using their id as a key. So Ext.getCmp( myId) will look up and return theRegistrationObject[“myId”]; So it will be very quick. At the same time its benefit is also its downside. Let’s say you have two components and both have the same id then what happens? Well last in wins. So you might not get back what you where expecting.

Ext.componentQuery.query

This is where Ext.componentQuery.query comes in. It will return an array of items, but it works in a slightly different way. Instead of pulling an item directly from an indexed array (which is dead fast), this will traverse the visual items and create a collection depending on what parameters you give it. If you’re application is really large then this is (potentially) going to be really slow.

In order to make sure its not slow you can pass in a very specific path to get at where your component is located.

E.G. Ext.ComponentQuery.query(
'formpanel selectfield[itemId=dataFilterType]' )[0].getValue();

This will return all selectfield’s that have an itemId of dataFilterType and are children of formpanel. If you know there is only one of these then you can reference the first item in the array and then say gets its value.

I suppose for testing/debugging purposes you should also add an alert/console message if if it returns more than 1 item and you only expect it to return 1.
Might be interesting to see some timings on these calls but that’s for another post.

Update –
Check out this screencast by Jay Garcia on the subject. Plus he explains quite a bit more.