technical-recipes.blogspot.com

A summary of usages of git stash commands: 1. List current stashes [code language="xml"] > git stash list [/code] 2. Deleting stashes Delete all stashes: [code language="xml"] > git stash clear [/code] Delete specific stash (stash id in quotes on PowerShell): [code language="xml"] > git stash drop <stashId> [/code] 3. Save stash(es), annotated with a message [code language="xml"] > git stash save my message... [/code] 4. Apply the most recent stash [code language="xml"] > git stash apply [/code] 5. Apply a specific stash [code language="xml"] > git stash apply --index 2 [/code] or use stash{0}: [code language="xml"] > git stash apply stash@{1} [/code] If you are using a Powershell-based command line, it won't like the curly braces, so enclose it in quotes and it should work: [code language="xml"] > git...

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...

Some instructions on how to get started with a very simple TypeScript-based example in a Visual Studio Code development environment. 1. Create a new Aurelia project If you're unfamiliar with creating a new Aurelia project see this existing post for more instructions: https://www.technical-recipes.com/2019/getting-started-with-aurelia-in-visual-studio-code/ In the options presented during project creation I choose to use TypeScript. The files we are interested in modifying will be created in the src /folder as shown: 2. Create the web pages Create two more sub-folders within the src folder: 'home' and 'about': Into these folders will insert the files home.html, home.ts, about.html, about.ts: home.html [code lang="html"] <template> <h1>Home page</h1> </template> [/code] home.js [code lang="js"] export class Home {} [/code] about.html [code lang="html"] <template> <h1>A...

For steps on setting up a new Aurelia project please refer to this link: https://www.technical-recipes.com/2019/getting-started-with-aurelia-js-part-2/ (For reference I am using the TypeScript option when creating this new Aurelia project and building / running it in Visual Studio Code.) Some other useful links on this topic can be found here: https://www.syntaxsuccess.com/viewarticle/building-a-treeview-in-aurelia https://gist.run/?id=53dc5b81ef1549cdcc56c3b1fa1e67ba (GistRun link) Anyway the following are the files I added to Visual Studio Code project: app.html [code lang="html"] <template> <require from="styles.css"></require> <require from="tree-view"></require> <tree-view></tree-view> </template> [/code] app.ts [code lang="js"] export class App {} [/code] node-model.ts [code lang="js"] export class NodeModel { public id: string; public icon: s...

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...