technical-recipes.blogspot.com

1. slice() The splice() method adds/removes items to/from an array, and returns the removed item(s). [code language="js"] const words: string[] = ['abc', 'xyz', '123', 'the', 'cat', 'sat', 'on', 'the', 'mat']; const splicedWords = words.splice(3); console.log('Spliced array: ' + splicedWords); console.log('Original array: ' + words); [/code] Output: [code language="text"] Spliced array: the,cat,sat,on,the,mat Original array: abc,xyz,123 [/code] Note that on using splice() the original array is impacted. The contents of the original array can be modified by adding or removing elements too, such as in the following example. Remove the word 'the' from the selected index index in the list and insert the words ['this', 'other'] instead: [code language="js"] const words: string[] = ['the', 'cat', 'sat', 'o...

Firstly in your project folder make sure Aurelia dialog has been installed: [code language="text"] npm i aurelia-dialog [/code] Also see this following link on how to get started in creating, building, running etc a new Aurelia project: https://www.technical-recipes.com/2019/getting-started-with-aurelia-js-part-2/ In your src folder create the following files as a bare minimum dialog example: dialog.html [code language="html"] <template> <style> div.div{ border: 1px solid blue; padding: 15px; } </style> <div class="div"> <div> <h1>${title}</h1> </div> <div> <p1>${message}...</p1> </div> <div> <button click.delegate="ok()">OK</button> </div> </div> </template> [/code] dialog...

An alternative and possibly simpler approach to getting set up and using Aurelia. The previous approach can be found at the following link https://www.technical-recipes.com/2019/getting-started-with-aurelia-js/ Prerequisites The Aurelia CLI has a pre-requisite, Node.js . Get it from here: https://nodejs.dev/download/ In Visual Studio Code press Ctrl + P and type the following command: [code lang="xml"] ext install aurelia [/code] Still in Visual Studio Code, install the Aurelia CLI via the following command: [code lang="xml"] npm install aurelia-cli -g [/code] Step 1: Create a project folder In Windows Explorer create a directory for your Aurelia code projects if you have not yet done so: Step 2: Create the Aurelia project Open Visual Studio Code and in the terminal window enter the 'au new' command plus the name of your Aurelia project: [code lang="xml"] au new projectName [/code] When prompted, select if you want y...

Useful links: https://code.tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript--cms-26209 https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d To summarize: map Creates a new array by transforming every element in an array, individually. filter Creates a new array by removing elements that don't belong. reduce Takes all of the elements in an array, and reduces them into a single value. reduce method executes a provided function for each value of the array (from left-to-right). reduce passes your callback four arguments: The current value The previous value The current index The array you called reduce on In this post I use playcode.io to do the compiling of the JavaScripts online. Example Suppose we have the following array of objects, and we wish to filter the list of objects whose age is greater than 12, put the ages of those filtered objects into another array, and find the total age f...

A collection for Aurelia / typescript / javascript as and when I encounter them. For a post on getting set up with Aurelia JS see this post: https://www.technical-recipes.com/2019/getting-started-with-aurelia-js/ https://www.technical-recipes.com/2019/getting-started-with-aurelia-js-part-2/ 1. Hello World! app.js [code language="js"] export class App { constructor() { this.myData = 'Welcome to Aurelia app!'; } } [/code] app.html [code language="html"] <template> <h3>${myData}</h3> </template> [/code] Giving the following output: [caption id="attachment_9033" align="alignnone" width="630"] Hello World![/caption] 2. Detecting mouse movement events From here: https://bl.ocks.org/Vheissu/db72c2d41709697134654d5287913c0c app.html [code language="html"] <template> <div mousemove.delegate="mousemove($event)" style="background: t...

When transferring your old website to a new one, you will probably want to re-direct your visitors so that links pointing to outdated URLs are sent to the correct new ones.