Category: tips
An Honest WFH Experience – the set up

An Honest WFH Experience – the set up

By | | Comments 0 Comment

An actual working from home set up! Not some manicured or cleaned up rig. But this is a functional, productive live coding environment.

Not the cleanest or slickest set up – but I really like it!

So the world is in lock down, or at least large parts of it are. Covid-19 has hit and in order to spare a complete meltdown of our health services we are all working from home where possible.

Thankfully developers have the ideal job when required to work from home (WFH). We can do our job from anywhere as long as it has some form of data connection – even that we can do without for a bit!

Location and surrounding don’t matter to dev’s

So getting to the point, what do I do that is different from others? I’m going to break this into two posts.

  1. My physical set up. (this post)
  2. My daily routine, with positives and negatives.

Set Up

Firstly, you may be used to having all your IT equipment paid for and purchased for you by your employer, and as such your home set up may only consist of a single laptop.

This will not cut it! From a personal view point, it will frustrate you, it will get you down, it will slow you down. This will ultimately lead you to become unhappy and stressed. Stress does not lead to good code and will lead you down a path to grey hairs and sleepless nights. 😉


Many screens keep context switching simple

Developers can earn a very good wage and purchasing a few screens or a desktop will not break the bank, think of it as an investment in you and your career. If your employer will pay for something then great! Take it, even the smallest of percentage gains in productivity will more than pay off and keep you happy.
If there is one thing that makes you feel good being a developer, it’s completing a task. The more you get done the better you feel.

It’s to easy to flip from being awesome to banging your head. A good set up will save you entering the painful state so often!

Ultimately a great, comfortable set up will make you more productive, contented, calm and happier, this is a win for all. The Covid-19 lock down is expected to be months, do you really wish to stare and a small 15″ laptop screen for 3-4 (maybe 8+) months!

I really can’t stress this enough – get yourself more visual real estate.

Software

Microsoft mouse without borders – https://www.microsoft.com/en-us/download/details.aspx?id=35460

This is an brilliant piece of software and free! Sure I’d like it to do a wee bit more, but it’s free. So you’ve got your small laptop, but now taken the plunge to get something to handle a few more screens. Can you use both at the same time without the hassle of two keyboards and two mice? YES.

Install Mouse without borders, now you control both machines (it can do more than two as well) without the clutter. But why should you do that? Does it really gain anything?

Two machines

Main One

My main machine (tower pc) is for code, work, emails and all that involves day to day operations. The reason for this is so I can get a powerful graphic card, get one that will drive 3 or 4 monitors. If I had space I’d have 4, but 3 screens is enough 🙂

The actual tower PC doesn’t need to be a powerhouse machine, especially if you remote into a secure remote desktop, which means your machine doesn’t need to do any real processing. Your circumstances may vary, but in all my years I’ve never ‘needed’ a top of the range machine. I may have wanted it, just because, but never needed it!

Machine Two

The laptop, and this is key for collaboration. It is used for communication. Being stuck apart from your colleagues is hard, and when you are working on spec’ing out a system or creating new configuration for which you may not have all the required knowledge, then having someone to speak to and bounce ideas off is invaluable.

So start up a Zoom conference call, stay on it all day if needed, keep the face to face open until you solve the issue. You can screen share on your main machine while being able to see and speak on the dedicated communications machine.

Until you reach a situation where this type of communication is required, this may seem like overkill. But once you understand the value of communication, the easier this is and the more human it can become, the more you’ll understand that it is worth every penny. We are beings that like to communicate, yes even developers 😎 Use technology to make this as natural as possible.

Am I at home or my office?

This part is one where it will be very difficult for most to do if you live in a very built up area, but if you can then you should! In terms of mental state, being able to work effectively and the switch off at the end of the day, this one is a HUGE winner.

You need to be able to leave your house!

What? How on earth can I leave my house, I’m in lock down? Well you need another building on your premises. If you have a few spare square meters then you probably have enough room to build a shed. There are plenty of log cabin kits out there, again not very expensive, depending on what you go for.

A small cabin can set you back less than a £1000

Get one of these set up, get some power and some heat in there, add a bit of insulation and you are good to go!

Is it worth it? 100% it is. You walk out your back door, leave the home behind and you are now at work. The mental separation is so clear, and what’s more – do you have children? Yes, then yes you can close the door, no screaming kids to disturb that all important thought process. What’s more they’ll love it when they can come in.

Then at the end of the day, turn it off, close the door and you are done.

Conclusion

Space and screens

Get those two things right and you will be as productive as being in any office in any part of the world.

Verify the checksum of an installer file

Verify the checksum of an installer file

By | | Comments 0 Comment

One of those regular items you see when downloading a file.

What’s that checksum, how to I check it?

Quick solution if you are on a Windows machine.

  • Open the folder that you’ve downloaded the file to – probably the download folder
  • Inside the path bar, type cmd, then press enter
Enter cmd into the path bar
  • You will now have a command window open that is already looking in the download folder.
  • Now type the following certutil -hashfile {file name you are checking goes here} {check type, as in MD5 or SHA1 for example}
  • eg certutil -hashfile myDownloadedFile.exe SHA1
  • This will now output something like the below with a SHA-1 check

You can now compare the long number with the number on the download page, if they do not match DO NOT INSTALL.

Other checks you can do depending on what the website is asking for are these –
Hash algorithms: MD2 MD4 MD5 SHA1 SHA256 SHA384 SHA512

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!

Debugging facebook apps locally (web based ones)

Debugging facebook apps locally (web based ones)

By | | Comments 2 comments

If  you’re wanting to develop a facebook app then there is loads of helpful stuff out there to get you going. Specifically I’d start here if you’re interested http://www.adobe.com/devnet/facebook.html.

But what they don’t tell you is how to debug your app without you having to FTP your files each time you change something. (If your facebook app is based on AIR and not a web app, then this doesn’t matter).

  • Firstly log into facebook and go to your app settings, it will probably look like the below. What you are looking for is the ‘website with facebook login’. This is used by facebook when your app logs in ( you’d never have guess that! ). Anyway if this doesn’t match the url of where your app is deployed then you will NOT be able to log in.

    Change it to your local URL, in my case I’ve made it http://localhost/facebookLoginTest/index.html
    The important bit is the localhost as my actual app isn’t run from index.html but when I set up the app on facebook I just put that in.

  • Now that your app can login you will now be able to debug, but the default settings in Flashbuilder don’t output your files to your localhost. So this is the second part to getting everything to work.

    I’ve highlighted the two bits you need to change which is inside your projects properties (right click and select ‘Flex Build Path’).

    Change the output folder to push your output files to the folder inside your webserver. I use XAMPP to setup my webserver etc

    Also update the output folder URL, once changed when you hit debug it will load whatever URL is in that box + the html page. So as you can see I’ve changed my output folder URL to http://localhost/facebookLoginTest/ which when I run/debug my app gives me http://localhost/facebookLoginTest/FacebookTestApp.html?debug=true

That’s it.

[ad name=”ad-1″]

iOS – Mobile dev, make sure you flush when you’re done.

iOS – Mobile dev, make sure you flush when you’re done.

By | | Comments 1 comment

Developing for Apple’s devices can throw up a few little quirks that don’t happen when using Android devices.

This one happens if you are using shared objects to store information between sessions.
Basically, you should always call the flush mechanism whether you are adding more data to the shared object or if you are deleting something from the shared object.

What you find is if you have a shared object ‘shared’ with a value shared.data.firstValue = “something”, then you delete that value using 

delete shared.data.firstValue;

if you try to access the value firstValue you will get null.
This is exactly what I’d expect.

Then lets say you exit the app and you either kill the app from running in the background or iOS stops it. Then the next time you load the app and access the shared object shared.data.firstValue you will get back “something” and not null.

You must flush the shared object for it to be stored locally, otherwise when the app is killed, the local storage will not have been updated.

[ad name=”ad-1″]

Updating bindings when you only change a property inside an Object

Updating bindings when you only change a property inside an Object

By | | Comments 2 comments

Its quite a common thing with Flex and actionscript projects to create an Object and inside that object it will have many properties.  Something in your view will be bound to the object so that the view changes with the object. So long as you change the entire object this will work fine.

Where this doesn’t work is if you change a property inside the object.

So if we have something like this

[Bindable]			
private var myObject : ObjectDataVO;

When we set myObject to something the view component gets updated (great so far).
Lets say the myObject has a property text and the view component uses this to display some visual label, then somewhere in the app I change that property, myObject.text = “something else”;
The binding will not trigger as I haven’t actually changed the myObject, just a property inside it.

So how do we fire the binding manually? Well there is the BindingManager class (note this is an excluded class so you’ll not see it in the autocomplete ).
So in this example if I changed the myObject.text property then I could call

BindingManager.executeBindings( this, ‘myObject.text’, myObject );

This would fire of the binding as if the actual myObject had changed so anything listening in will now get updated.

[ad name=”ad-1″]

Additional compiler arguments – debug only code

Additional compiler arguments – debug only code

By | | Comments 2 comments

Many times you look something up, do it once and think cool I’ll remember that as it’s simple. Then 1 year later you’ve forgotten the syntax and you can’t find that help/blog page where you learned about it the first time.
Well I needed to add in some debug code that would only be there for debugging, and the last thing I want to do when building a release version is to scan through the code to remove it. So the ideal way is to use a conditional compiler argument.

So in Flashbuilder, under the project properties and then the Flex compiler properties you’ll see something like this

Compiler Arguments
Example for custom arguments

So if you had the following defined, -define=CONFIG::DEBUG,true -define+=CONFIG::SOMETHING_ELSE,false

Then in code you could do the following.

    CONFIG::DEBUG
    private var test : Boolean;

    CONFIG::SOMETHING_ELSE
    private function somethingElse() : void
    {

    }

The variable and function code will only be included if the compiler argument is true. So in the above example if you called the function ‘somethingElse()’ then this would generate a build error as somethingElse() doesn’t exist. Change the argument to true and it will build fine.

[ad name=”ad-1″]

Simple tip #4 (GOTCHA) – Datagrid borders

Simple tip #4 (GOTCHA) – Datagrid borders

By | | Comments 1 comment

More of a gotcha than a simple tip.

I was customising a DataGrid with various skin parts the other day (Flex 3) and could I get the borderskin to show, heck no! Its been a while since I had to create a DG from scratch so I’d obviously blacked out any previous pain with using the dammed DG.

Anyway why would the borderskin not show? I tried a simple solid border, nope. I tried a custom png graphic taken from Fireworks for the DG’s border, nope. I tried a programmatic skin border and guess what nope – nothing.  The issue was that I had the background alpha set to 1 (which is pretty normal!) and I had set the alternate row colours.

Setting the background alpha to something less than 1 revealed the border so I ended up fudging it by creating the programmatic skin border by whatever the borderThickness is outside the size of the DG.  
So if the DG was meant to be 400px wide and borderThickness was 2, I made the DG 396px wide and drew the border outside that area.  This is what I’ve expect to happen automatically.

Can’t believe I’ve missed this/forgotten this before. Crappy DG.

Previous Tip

Next Tip

[ad name=”ad-1″]

Simple tip #2 – random colours

Simple tip #2 – random colours

By | | Comments 0 Comment

Their are so many times I’ve used a random colour in my apps (mainly for testing) that I thought I’d add this way of using a getter method with actionscript to simplify the process.

First of if you haven’t got one already, create a uiltily class so features that you use regulary across projects (you could turn this file into a SWC and reference that in you various projects – now that I think about it I explain this as simple tip #3 🙂 )

So inside your utility class place the following code

public static function get randomColour() : uint {
	return Math.random() * uint.MAX_VALUE;
}

Then lets just say you require a random colour for anything just call Utility.randomColour, no brackets, no = signs. Because you’ve set the function as a getter using the function name will be enough. This method also means that you don’t need to remember the max/min values for a colour. The uint min and max values are the same as the the min/max values for colours.

e.g.

Utility is the name of the class that holds my utility functions.

Previous Tip

Next Tip

[ad name=”ad-1″]

Simple tip #3 – Utility SWC (library project)

Simple tip #3 – Utility SWC (library project)

By | | Comments 0 Comment

Do you frequently use simple actionscript functions in more than one project. Perhaps you’ve got a function to do tracking, parse strings to dates, or return a random colour etc.

I’m sure most folk will have struggled to think of what project they last used a generic function ABC in as they could do with using it for project XYZ and would rather spend 30 mins searching for said function rather than rewrite it.

Well as explained below is a way to stop this from happening and hopefully save you a heap of time.

  • Step 1

    – Create a library project.

  • So using flexbuilder, go to File->New->Flex Library Project.
  • This will create an empty library project.
  • Step 2

    – add in your Utilty class to the library project.

  • To do this add/create a Utility actionscript file that contains your static functions. Save, and this should then automaticlaly create a SWC file inside the library bin folder. (If it hasn’t and the file added has no errors then check the project properties to make sure the newly added file is being included – see pic)

  • Step 3

    – add the reference of the newly created SWC file to any project you intend to use it in.

  • So go to your project you wish to use the SWC with, then select the projects properties and inside ‘Flex build path’ select ‘Add SWC’.
  • Browse to the the previous library project and select the SWC from its bin folder.

You are now done, any time you update the code in the library project, those changes will be reflected in any project that references the SWC file automatically.

Previous Tip

Next Tip

[ad name=”ad-1″]