Blog

Where are the recruiters who help their network “advance” a career? Or shift across disciplines?

No one stays in the same role forever. Especially in the tech sector.

I had to leave “employed” life to break free from being “just a programmer”, and still, I continue to get pinged for what I consider mid-level programming roles.
I’ve been programming for 20 years. I’m not interested. Was a recruiter ever going to ask what else I want to do?
(Well, sorry, too late. I’ve done it already, on my own. In the last 12 months I’ve now architected a business web-application platform, co-run a business and lead/manage/mentor overseas staff.)

If you’re a recruiter and want to stand out, help people move “up” or “sideways”, not just into the next dead-end, same-old-same-old job.

But then, that would require “cultivating” a network, getting to know people and staying in touch.

I received the following error today in a project I’m working on (the relevant part is in bold):

MainModule.bundle.js:27136 Uncaught TypeError: platform_browser_dynamic_1.platformBrowserDynamic is not a function
   at Object.__decorate (MainModule.bundle.js:27136)
   at __webpack_require__ (Polyfills.bundle.js:55)
   at webpackJsonpCallback (Polyfills.bundle.js:26)
   at MainModule.bundle.js:1

You can see my response to a similar problem at https://github.com/angular/angular/issues/10732#issuecomment-417173741.

And my response here as well, for completeness:

I just had the same issue in a project I’m working on. We’re using Angular 5.0.2 and Webpack on Windows in an IIS/ASP.NET project, with our primary browser as Chrome.
My issue randomly appeared after rebooting my PC and loading up my dev environment again (no code or configuration changes).
I managed to resolve the issue after a couple of attempts at starting the project (in Visual Studio) by also browsing to the the app URL Microsoft Edge. It loaded find. I then did a hard refresh (Ctrl+F5) in Chrome and it came good too.
Note: we manually start and leave running Webpack in separate command window, but start the actual application from withing Visual Studio.
My guess is Webpack crapped out behind the scenes and needed some time and a hard refresh in the browser to get the correctly compiled code to the browser again.

I don’t fully trust source control systems. Not even Git. That’s because I’m an old fella in the industry and I’ve been bitten too many times to fully trust systems.

Point in hand. I just had a merge from ‘develop’ royally screw up some code in such a way the effort to find and fix the change is greater than the effort to just blow away my working branch and pull again from remote.

Pro Tip!

When merging from another branch like ‘develop’ into your working branch, first commit and push your changes to remote.
That way, when your merge screws something up without you realising until after you’ve re-compiled and tested the merge – you do re-compile and test your merges right? – you can reset or blow away the branch (even delete your local branch and pull again if need be) without losing your hard-won changes.

Here’s a quick JavaScript helper snippet to return a trimmed string based on the calculated maximum length of a string to fit the width of a parent container element.

Written in TypeScript.

/**
 * Takes a full string and returns a trimmed version to fit within a parent space.
 * @param fullLengthString  The full length string to trim to a parent space.
 * @param font              String representing the font styling of the text (required to calculate text length).
 * @param maxLengthPixels   Max pixel width of the parent space to fit the text into.
 * @param removeExtraChars  The number of extr characters to remove from the trimmed space, if required. (Default: 0)
 */
private getMaxLengthString(fullLengthString: string, font: string, maxLengthPixels: number, removeExtraChars: number = 0): string {
	let maxLengthString: string = "";

	let canvas = document.createElement("canvas");
	let context = canvas.getContext("2d");
	context.font = font;

	for (let i = 0; i < fullLengthString.length; i++) { // Build the string maxLengthString = maxLengthString + fullLengthString.charAt(i); // Test the length of the string let metrics = context.measureText(maxLengthString); if (metrics.width > maxLengthPixels) {
			// Trim the string to a max length.

			// The number of characters to remove.
			let removeChars = 1;   // At this point the length is too long, so remove 1 character to get it under.
			if (removeExtraChars > 0) {
				removeChars = removeChars + removeExtraChars;
			}
			removeChars = removeChars * -1; // To make sure they're sliced from the end.

			// Remove characters from the string.
			maxLengthString = maxLengthString.slice(0, removeChars);

			return maxLengthString;
		}
	}

	// Full string is OK.
	return maxLengthString;
}

Here’s a quick JavaScript helper snippet to calculate width of a string, based on a supplied font styling.

Written in TypeScript.

Credit goes to https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393

/**
 * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
 *
 * @param {String} text The text to be rendered.
 * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
 *
 * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
 */
private getTextWidth(text: string, font: string): number {
	// re-use canvas object for better performance
	let canvas = document.createElement("canvas");
	let context = canvas.getContext("2d");
	context.font = font;
	let metrics = context.measureText(text);

	return metrics.width;
}

Here’s a quick JavaScript helper snippet to get the inner width (excluding padding) of an element in the DOM.

Written in TypeScript.

/**
 * Return the calculated inner width of an element.
 * Returns -1 if width is unknown.
 * @param elementID         ID of the element to calculate the width for. Set to "" to use elementClassName
 * @param elementClassName  CSS class name on the element to calcualte the width for. Ignored if elementID is provided.
 */
public static GetElementInnerWidth(elementID: string, elementClassName: string): number {
	let width: number = -1;
	let element: any = null;

	// Get the DOM element to check,
	if (elementID !== "") {
		// Lookup by element ID.
		let elementByID = document.getElementById(elementID);
		if (elementByID !== undefined) {
			element = elementByID;
		}
	} else {
		// Lookup by CSS class name. Use first found node as actual element.
		let elementByClass = document.querySelectorAll("." + elementClassName);
		if (elementByClass !== undefined && elementByClass && elementByClass[0]) {
			element = elementByClass[0];
		}
	}

	if (element !== null) {
		// The outer width of the element
		width = element.clientWidth;

		// Get the calculated padding so we can remove it.
		let paddingLeft = ComponentHelpers.TryParseInt(window.getComputedStyle(element, null).getPropertyValue("padding-left"), 0);
		let paddingRight = ComponentHelpers.TryParseInt(window.getComputedStyle(element, null).getPropertyValue("padding-right"), 0);

		// Innerwidth = outerwidth - padding
		width = width - (paddingLeft + paddingRight);
	}

	return width;
}

Here’s a quick JavaScript helper snippet to test a string and return a parsed integer value, or a default value if the the parse fails.

Written in TypeScript.

 

/**
 * Try to parase an integer value from a string. Returns the number if successful, otherwise return a default value.
 * @param value The string with an integer to parase.
 * @param defaultValue Default value to return if parsing fails.
 */
public static TryParseInt(value: string, defaultValue: number = 0): number {
	let parsedValue = parseInt(value, 10);

	if (isNaN(parsedValue)) {
		// Failed to parse. Return the default value.
		return defaultValue;
	} else {
		// Return the parsed value.
		return parsedValue;
	}
}

I have a plain-text (ASCII) list of URLs, with each URL on a new line, and I need to turn it to a HTML list (<ul>) of actual anchor links (<a>).

For example, I start with:

https://www.site1.com/
https://www.site2.com/
https://www.site3.com/
https://www.siten.com/

And want to end up with:

<ul>
<li><a href="https://www.site1.com/">https://www.site1.com/</a></li>
<li><a href="https://www.site2.com/">https://www.site2.com/</a></li>
<li><a href="https://www.site3.com/">https://www.site3.com/</a></li>
<li><a href="https://www.siten.com/">https://www.siten.com/</a></li>
</ul>

In Notepad++ It’s trivial.

• Paste your list of links into a new document.
• Open the “Find” dialogue (Ctrl+F).
• In the “Search Mode” options select “Regular expression”.
• For “Find what” enter: ^(.+)$
• For “Replace with” enter: <li><a href=”\1″>\1</a></li>
• Select “Replace All”.
• Then you just have to add the “<ul>” and “</ul>” on the first and last lines (respectively).

That’s it.

And here it is with images:

Image 1: The ASCII list of links.

Image 2: A clearer view of the FInd/Replace interface.

Image 3: The result of “Replace All”.

Don’t forget to add the “<ul>” and “</ul>” on the first and last lines.

(Update – 5 minutes later): I just noticed I can set the transparency of the Find/Replace dialogue, so didn’t need the second image. Oh well…)

Learning how code “hangs together” is crucial for all programmers. And it’s not that difficult.

Most software has an entry point, though it varies depending on the language or framework. Find and understand that entry point.

From there just follow the code. In procedural and object-oriented languages you’ll mainly be dealing with IF statements, SWITCH statements, calls to functions and calls to objects with properties and methods.

Watch what is called. Look at the parameters being passed into methods or class constructors.

Look at how variables are manipulated. Consider the scopes of variables and class properties – are the private to a function or class, or are the public? Are function parameters passed by value or by reference?

And think about namespaces – from the variables and functions that sit in the global namespace through to those nested under specific namespaces.

Functions will sometimes seem to be in a global namespace but are actually implicitly at a deeper namespace level thanks to using or include statements in the file (e.g. in C# and VB.NET).

PRO TIP: Make Find All (usually Ctrl+F) your best friend. If you come across a function or variable and don’t know where it’s defined or what it’s used for, any decent IDE with allow you to perform a “Find All” and list out all occurrences of it. Use that to trace the use of the variable/function.

But the most important thing you can do as a programmer is: take the time to read and understand the code. The more years of experience you have the easier and more intuitive it becomes, but always it is important. Learn how to follow the flows, intuit the structure and find where functionality lives.

This is the true heart of most programming activity.

Sometimes the basics can stump you. And I was stumped this morning when I needed to convert a TypeScript variable of type “string” to a variable of type “number”, including a non-numeric check.

IsNaN() and parseInt() in JavasScript didn’t work because in TypeScript the input parameters are numbers, so immediately that’s a compile time exception.

After a quick search and trusty StackOverflow answer, I came up with the following function:

/**
 * Return the numeric value of a variable if the value is a number, otherwise return zero (0).
 */
function convertToNumber(value: any) : number 
{
  let convertedToNumber: number = 0;

  if (isNaN(Number(value)) === false) {
    convertedToNumber = Number(value);
  }

  return convertedToNumber;
}

 

Running Example

NOTE: You can pop the editor open in a new window by selecting “Edit On StackBlitz” in the bottom-left of the inserted window.
Select the folded-page icon at the top of the left column (below the StackBlizt blue/white icon) to see the list of files.

If you’re using Internet Explorer or there’s just a black window below, here’s the link to the code (and I suggest using a “modern” browser – Chrome and Edge both work): https://stackblitz.com/edit/typescript-x2hpkw.