fbpx

Author: Steve Gilliam

Get In the Zone

Last modified: April 24, 2018

Using Zones is a great way to escape Angular’s change detection and speed up performance. However, when a 3rd party library uses them, it can cause some confusion and/or unexpected results (Any resemblance to actual persons or events is purely coincidental).

ChangeDetectorRef allows you to manually force change detection and be on your merry way. 

import { ChangeDetectorRef } from '@angular/core';
...
export class Zoning {

     constructor(private changeDetector: ChangeDetectorRef) {}
...
    this.codeOutsideOfZone = true;

    // forces change detection
    this.changeDetector.detectChanges();
...
}

The Line Has Been Drawn

Last modified: March 23, 2018
Last week I was working in an Angular2 project. The feature called for us to draw a line on a canvas element.  The gotcha; the line had to fade out like a comet tail and we had maintain visibility of a background image.


Using this Tarik A’s free hand drawing implementation, to capture the points of the line, Greensock to animate the tail, and this bit of code.  We were able to achieve a nice fade out effect.
...

@Component({
  template: `
<div class="container" #container>
              <canvas #canvas></canvas>
              <svg #svg></svg>
            </div>

`
})

...

@ViewChild(‘svg') svg: ElementRef;
svgns = ‘http://www.w3.org/2000/svg';    

createLine(leader, follower) {
        const line = document.createElementNS(this.svgns, 'line');
        
        TweenMax.set(line, { stroke: `#FFFFFF`, strokeWidth: 3, alpha: 1 });
        line.setAttribute('x1', `${follower.x}`);
        line.setAttribute('y1', `${follower.y}`);
        line.setAttribute('x2', `${leader.x}`);
        line.setAttribute('y2', `${leader.y}`);

        this.svg.nativeElement.appendChild(line);        

        // fade out
        TweenMax.to(line, 0.5, { alpha: 0 });
    }

...

Rails Forms: Validating and Persisting Duplicate Parameter Names

Last modified: March 24, 2017

Building Rails forms is a pretty straightforward process but, once in a while, I run into a ‘gotcha’ that needs a simple solution. This week I was building a form where, if the user selects a particular subset of radio buttons, a text field is shown and the user is required to enter a string.  The form data is persisted using an enum to capture the radio button selection and a string attribute to capture the text entry if any.   The ‘gotcha’ is that the text field input needs to be placed in multiple places within the form,  and rails will ignore duplicate parameter names.

To allow the submission of the same input field multiple times, I added an empty array to the input name:

 

   <input id = “user_text_entry”, name=“user[text_entry][ ]”, placeholder=“Enter text” >
         => [,,”user’s text entered”]

 

More on parameter naming conventions can be found here.

 

To implement front end validations, I used jQuery’s :visible selector to ignore the hidden text fields.

 

var userTextEntry = $(‘.text-required-radio-box’).find(‘*’).filter(‘:input#user_text_entry:visible');