Shane Bartholomeusz

Geek and lover of all things tech related

Tag: JavaScript

Solved: Why Async/Await does not work with .forEach

The Problem

Javascript offers a number of different ways to iterate over an array. Recently while using the array.forEach syntax, I came across some interesting behaviour when using them with the async/await syntax.

To demonstrate. Lets take the following Javascript code which simply prints some messages to the console every 2 seconds.

Javascript Icon
function waitForTwoSecs(i) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`loop iteration ${i}`); 
      resolve('resolved');
    }, 2000);
  });
}

async function mainProgram() {
  const loopIterations = [1, 2, 3];
  console.log('mainProgram Start');

  loopIterations.forEach(async iteration =>  {
    const result = await waitForTwoSecs(iteration);
  });

  console.log('mainProgram finished'); 
}

mainProgram();
Continue reading

How To: Deep Clone a JavaScript Object

Overview

JavaScript is becoming ever increasingly more popular as time goes by. While JavaScript has many advantages, it also has many interesting quirks or nuances that can catch out new beginners.

In this post I’ll show you how to deep clone a JavaScript object.

Problem

Okay … before we go any further … lets take a step back and understand the problem at hand.

Objects in JavaScript are passed by reference, meaning that any object returned by a function will point to the same memory reference as the original object. Therefore if the caller of the function modifies the returned object, they will actually be changing the original source object.

Javascript Icon
Continue reading

Solved: BlazorInputFile ‘No File Chosen’ Error

Blazor WebAssembly Icon

Problem

Blazor is an exciting new technology for .NET developers that enables us to leverage our core strengths by writing most of the code in C# and minimising the need to write JavaScript code.

While working on a Blazor WebAssembly solution that used Steve Sanderson’s BlazorInputFile solution I came across an unusual issue where the “No File Chosen” text would not change and the selected filename did not appear even though a file had already been selected.

Hmmmm … what’s going on here?

HTML File Input Screenshot
Continue reading

Fixed: SPFx Web Part Long Load Time

Problem

While working on a SharePoint Framework (SPFx) webpart I noticed some odd performance issues… My SPFx webpart was very slow to initially load.

I was initially a bit puzzled by this however after some investigation I discovered the below solution.

SharePoint Logo
Continue reading

Microsoft Exam 70-480 Study Guide

Having recently passed the Microsoft 70-480 (Programming in HTML5 with JavaScript and CSS3) exam I wanted to share my experience and provide some tips to those that are soon planning to sit this exam.

Microsoft Logo

Overview

The 70-480 exam forms part of the MCSD: App Builder certification. The achieve the certification you must pass the following exams.

  • 70-357 – Developing Mobile Apps
  • 70-486 – Developing ASP.NET MVC Web Applications
  • 70-487 – Developing Microsoft Azure and Web Services

The content covered in the 70-480: Programming in HTML5 with JavaScript and CSS3 exam is as follows. Before attempting to complete the exam you should ensure you have knowledge in these key areas.

Implement and Manipulate Document Structures and Objects (20-25%)
> Create the document structure by using HTML
> Write code that interacts with UI controls
> Apply styling to HTML elements programmatically
> Implement HTML5 APIs
> Establish the scope of objects and variables
> Create and implement objects and methods

Implement Program Flow (25-30%)
> Implement program flow
> Raise and handle an event
> Implement exception handling
> Implement asynchronous programming
> Create a web worker process

Access and Secure Data (25-30%)
> Validate user input by using HTML5 elements
> Validate user input by using JavaScript
> Consume data
> Serialize, deserialize, and transmit data

Use CSS3 in Applications (25-30%)
> Style HTML text properties
> Style HTML box properties
> Create a flexible content layout
> Create an animated and adaptive UI
> Find elements by using CSS selectors and JQuery
> Structure a CSS file by using CSS selectors

Continue reading

© 2024 Shane Bartholomeusz

Theme by Anders NorenUp ↑