Thursday, 14 February 2019

Dom’s PiWars contribution – Arvind

NOTE: Cross-posted from here

Arvind and I met the week before last for a quick chat so I could write this, and it's taken me this long to have time to write up the conversation. I can only blame the vagaries of Internet Explorer 11 messing with my workflow; it's so frustrating to have something that looks and works just as it ought to in every browser under the sun, only for our QA to come along and test it in IE11 and notice that it's borked. It's a shame that a significant proportion of our customers use it, despite the recent advice from Microsoft to avoid using it as the default browser.

Ah well, back to talking about Arvind. I should approach describing Arvind by giving some context. In the dim and distant past, I moved from a job as a forensic psychiatric nurse to nursing on nights in an acute psychiatric ward in Cambridge.

Not long after starting there the latest change in nurse education occurred and we who worked nights were asked to mentor student nurses for a compulsory set of nights. I only managed to mentor two before trends changed again and they were no longer required to do some nights before qualifying.

One was the daughter of my friend and boss at the time, and we're still friends though she's no longer a nurse. I don't think she nursed for much longer after finishing her training before becoming a teacher. Here I am kicking myself for not remembering if she was a trained teacher before nurse training or if she went for teacher training afterwards - whatever though: we still keep in touch, so I'm guessing it wasn't working alongside me that put her off nursing.

The other was Sally, Arvind's wife, and I kept abreast of what she was doing but she worked on a different site, and despite us both living afloat on the Cam for a while, we lost touch. My divorce happened, and it turns out that, like many such things in Cambridge, my next wife knew Sally, so I kept up-to-date by proxy.

Then years and a different career happened before someone clocked my geeky t-shirt at the gym and introduced me to Ely Makers and Arvind got in touch and mentioned that his wife knew me. How cool eh?

Anyway, that's the context: on to Arvind. He works as developer like me but is far more adept at hardware type things like 3D printing and electronics whereas not even my Mum asks for my help with technology, and my wife has her own, individual, printer.

I was thinking of how best to describe him and while doing so was reading - for the third time - Dan Simmon's Hyperion (or The Fall of Hyperion) and was struck with something that one of the Pilgrims, Sol Weintraub, said. While describing his daughter, he says something about knowing someone who's sheer goodness makes one strive to be better themselves (having said that I can't find the relevant section now so I might be wrong about the character). I know a few of those people, and despite them making me feel distinctly un-good in comparison, I feel privileged to do so - even more so to be married to one (hey, it's nearly the 14th of February so I can't help myself).

So we know that Arvind is a developer and that I consider him intrinsically good, but what else is there to say about him? Well, one of the things that shaped my consideration was his emphasis on helping others and collaborating. He took exception (at least as much as he seems able to, anyway) at my hesitation to share too many details of our final entry to PiWars this year, for instance.

I thought I'd better show some interest in the actual final product during our conversation and subsequently learnt about the debate about whether to use tracks or wheels and also about stepper motors (which sound fascinating). The thing that does stand out is that while Arvind isn't organising our team, he is one of the many pillars of Ely Makers and without his enthusiasm, we'd be all the poorer.

We, of course, discussed our shared profession, especially in the context of the current divide that seems to be occurring with those who sling HTML, CSS and minimal JS becoming an almost different animal from those who dig deep into whatever the favourite JS Framework is at the minute. This dichotomy is something of a new debate and was brought to my attention by the article by Chris Coyier called The Great Divide, give it a read: it's fun.

Along with the discussion of our jobs we looked at the broader aims of Ely Makers, and there seem to be two principal aims. These seemed to me to be to encourage people to get involved, while also remove the fear which some feel towards technology. I was reminded of the Men's Shed Movement, though the club aims to embrace all genders and abilities. Arvind want to encourage all, so I guess calling it a Men's Shed-like thing is wrong, as all are welcome... let's call it a Shed Movement instead ;-)

I guess even calling it a Shed Movement might be incorrect as Arvind is keen to encourage community and collaboration, not only within Ely Makers but amongst other Makers and the wider community. Thinking about it that seems to be the ethos of all involved with loads of us pitching in to put on events, if not as part of Ely Makers then wider afield (two of us a Code Club volunteers). I guess this is echoed right there on the front page of our website:

Ely Makers is a friendly network of people of all ages with an interest in Science, Technology, Computers and Electronics. The group is based in Ely, Cambridgeshire although anyone is welcome to join.

To sum up, as this post is late and I need to do another over the coming weekend, if you have a chance to meet Arvind or Sally, then please do say hello. Should you be knocking around Ely over the weekend when we're running a session, then please do pop in and check out the stuff we're doing. It's worth keeping a weather eye on our Events & Dates page.

Wednesday, 30 January 2019

Dom’s PiWars contribution – Introduction

NOTE: Cross-posted from here

I am perhaps the least active member of the Pi Wars Team, but then again I did say that I would be. Arvind kindly asked if I’d like to help and of course I said yes. I then realised that there was likely to be very little I could do, being as inept as I am with anything other than the odd bit of writing and wrangling code (HTML, CSS and JS) into something that resembles something that you’d like to – hopefully – interact. I lurk in our piwars Slack channel and try to contribute here and there, though that generally involves merely adding a cute emoji to someone’s efforts, without any clear understanding of what they have done. It all looks intelligent and sophisticated, but I don’t have a clue of the effort involved because my mind doesn’t work that way. Give me a Lego set and some instructions, and I’m away with the fairies for a couple of hours. Ask me to create something physical or decipher the bands on a resistor, and I’ll look up instructions on YouTube (actually, one competency I do have is in the realms of Archery… when once asked who our coach was in an archery competition we had to answer, “YouTube”).

So, with all that out of the way, I’m going to try and write about what we’re (I use the term “we”, but you know…) doing concerning Pi Wars. I appreciate that there might be some level of competition so I’m going to steer well away from the hard facts and talk about the things that interest me: the people on our team that are doing the hard stuff and making Lego without the instruction book – I might even get permission to talk about what they’re doing. Over the next few weeks, I’ll be interviewing some (if not all) of the team so that you can get some insight into their personalities if or when you meet them at the final competition.

Of course, should you have any questions for the team, please don’t hesitate to get in touch and I’ll do my best to get an answer for you, subject to the solution not being sensitive regarding the competition?

Tuesday, 22 January 2019

Google's GDPR fine

So Google was hit with a $57 million GBPR fine, instigated by France, on Monday 21st January 2019. I took to thinking about this today and seeing as Google posted its first $100 billion in sales in 2018 I calculated that this represents something like 0.057% of its sales... or 4.99651328 hours (0.057% of (1 year)). Please check my math though as my billions are different from modern billions.

Friday, 23 November 2018

Finding the index of an array of objects by one of the object's properties

I've been doing a shed load of work with lodash of late and, seeing as I've not posted in an age, I thought I'd illustrate an issue I was working on today.

I needed to pass an element of an array to a Vue component but needed a specific one identified by another object. We use lodash so thought I'd make use of findIndex and isEqual and came up with this:

const obj = {
    id: 1,
    name: "fred"
};

const arr = [{
    a: "B",
    s: {
        id: 1,
        name: "fred"
    }
}, {
    a: "A",
    s: {
        id: 2,
        name: "fred"
    }
}];

alert(arr[_.findIndex(arr, (a) => _.isEqual(a.s, obj))].a);

Heat eh?

Saturday, 14 July 2018

Getting Unstuck: Day 10

As a result of signing up for Scratch Getting Unstuck I got a little carried away building a binary clock like this one in Scratch, but got really, really annoyed about not being able to place the elements just where I wanted. I remembered reading something a little while ago about the sb2 file format being an archive so I unzipped it and clocked that sprites have a scratchX and scratchY coordinate within the project.json file. That and figuring out that it uses SVG as the Vector format (why wouldn't you?) meant that I could replace the dodgy path with a circle element. This is the result and I'm quite pleased with it. Now, if only I could automagically use dynamic variable names I wouldn't have to have so many functions. Ah well.

Wednesday, 11 July 2018

Getting IE11 to play nicely with grid-area

I've been playing with CSS Grid layout lately within a Vue Component and I'm needing to place specific blocks within a grid, they are of an arbitrary position width and height and that all worked a treat within FireFox and Chrome... just not in, you guessed it, IE11.

So after banging my head against the issue for a few hours and trying everything I could think of I went to StackOverflow and asked. It seems I was being too helpful and adding the browser prefix rather than letting Vue do it for me. So far so good and StackOverflow provided the answer (thanks zero298), but it only went so far.

After looking at the issue some more I came up with the following script:

getStyle: function(x, y, a, b, c, d){
    var style = [];
    style.push("grid-row: " + x + ";");
    style.push("grid-row-span: " + d + ";");
    style.push("grid-column: " + y + ";");
    style.push("grid-column-span: " + c + ";");
    style.push("grid-area: " + x + " / " + y + " / " + a + " / " + b + ";");
    style.push("border: 1px solid white;");
    return style.join(" ");
}

I know that I'm using CSS for the border on the elements but IE11 doesn't support the grid-gap property for some reason, and rather than use browser detection, I figured it would be better to just do it this way for all elements. It's an interesting way of doing things as some of the properties are incompatible, which is why the decent bits of grid-area are left to the end and the IE11 specific bits get added first. IE11 doesn't support grid-area anyway so we're golden.

A little bit of extra work but should you examine the result in the bound style of an element you only see the appropriate CSS for the appropriate browser, which is nice. As I replied added in my original question on SO I just needed to trust Vue!

EDIT

I got to thinking about the variables I was passing to the function above and realised that the c and d variables could be derived from subtracting the width from the x coordinate and the depth of the block from the y coordinate. Not only does this meant that the number of variables I was passing was reduced (something of an issue as the functions I was calling this from were making the calculations on the fly) but it also makes it much clearer. This is the new function:

getStyle: function(x, y, width, depth){
    /***
     * X=Row , Y=Column
     * https://answers.yahoo.com/question/index?qid=20090609205915AASR51m&guccounter=1
     * IE11 has issues with grid-area as well as the syntax of grid-row and grid-column.
     * As such we need a polyfill for that that uses "-span" to indicate the "length" of the element
     * @param {number} x The "line" where the element should start on the horizontal grid (column) from the top
     * @param {number} y The "line" where the element should start on the vertical grid (row) from the left
     * @param {number} width The "line" where the element should end on the horizontal grid (column) from the top
     * @param {number} depth The "line" where the element should end on the vertical grid (row) from the left
     */
    var style = [];
    style.push("grid-row: " + x);
    style.push("grid-row-span: " + (width - x));
    style.push("grid-column: " + y);
    style.push("grid-column-span: " + (depth - y));
    style.push("grid-area: " + x + " / " + y + " / " + width + " / " + depth);
    return style.join("; ");
}

Thursday, 28 June 2018

Colour shading with JavaScript

Shading a colour can be an utter pain but when I came across this script from CSS-TRICKS I was happy as a pig in muck. At least I was until I had to change the colour received via a call to getComputedStyle. getComputedStyle returns the colour in this format rgb(RedDecimalNumber, GreenDecimalNumber, BlueDecimalNumber) (red is rgb(255,0,0)) rather than the #RedHexadecimalNumberGreenHexadecimalNumberBlueHexadecimalNumber (red is #ff0000). The original script I was using was the one linked above so I had to convert the colour from getComputedStyle to hexadecimal, alter its shade and return it back to the original element's style as hexadecimal again.

This method seemed overly complicated, and I clocked that I didn't need to return it to the element as hexadecimal but could use it just as an RGB string in the inline CSS. Then I got to looking at the original script and realised that as getComputedStyle returns an RGB string, I could rewrite the original function to use a regex function and return that to the inline CSS instead. The following is the function:

o.replace(/\d+/g,c=>~~c+s>=255?255:~~c+s<=0?0:~~c+s)

I always forget that replace can take a function as the second argument but in this instance, it's cool that it does. The following is a less ES6y version:

o.replace(/\d+/g, function(c){
  if((parseInt(c, 10) + s) >= 255){
    return 255
  }else{
    if((parseInt(c, 10) + s) <= 0){
      return 0
    }else{
      return parseInt(c, 10) + s
    }
  }
})

Fun eh?