technical-recipes.blogspot.com

A quick cheat sheet for using Notepad++ to find and replace text in Notepad++. In all examples, use select Find and Replace (Ctrl + H) to replace all the matches with the desired string or (no string). And also ensure the 'Regular expression' radio button is set. [caption id="attachment_9278" align="alignnone" width="573"] Using Regex to find and replace text[/caption]

Some recipes for using flex to reliably align items in your html files. The collection of recipes can also be found as a collection my CodePen site . 1. Make a div box occupy available height, fixed footer HTML [code language="html"] <div class="outer"> <div class="inner_remaining"> I take up the remaining height </div> <div class="footer"> Fixed footer </div> </div> [/code] CSS [code language="css"] html, body { height: 100%; width: 100%; margin: 0; } .outer { display: flex; flex-flow: column; height: 100%; } .footer { height: 100px; background-color: grey; } .inner_remaining { background-color: #DDDDDD; flex-grow : 1; } [/code] 2. Fixed / sticky footer example HTML [code language="html"] <div class="box"> <h2>Fixed/Sticky Footer</h2> <p>The footer is placed at the bottom of the page.<...

In a recent project I was interested in Dragging shapes with the mouse in a WPF / MVVM Visual Studio project. This post contains an example on how to drag a rectangle from from one canvas location to another using the WPF / MVVM architecture. This project uses Microsoft Visual Studio Community 2019. Step 1: Create a new WPF project: [caption id="attachment_9221" align="alignnone" width="900"] Dragging shapes with the mouse[/caption] Step 2: Add event-handling and event-raising infrastructure Just add the following classes to your project: EventArgs.cs [code language="csharp"] using System; namespace Canvas1 { public class EventArgs<T> : EventArgs { public EventArgs(T value) { Value = value; } public T Value { get; private set; } } } [/code] EventRaiser.cs [code language="csharp"] using System; namespace Canvas1 { public static class EventRaise...

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

A summary of usages of git stash commands: 1. List current stashes [code language="xml"] &gt; git stash list [/code] 2. Deleting stashes Delete all stashes: [code language="xml"] &gt; git stash clear [/code] Delete specific stash (stash id in quotes on PowerShell): [code language="xml"] &gt; git stash drop &lt;stashId&gt; [/code] 3. Save stash(es), annotated with a message [code language="xml"] &gt; git stash save my message... [/code] 4. Apply the most recent stash [code language="xml"] &gt; git stash apply [/code] 5. Apply a specific stash [code language="xml"] &gt; git stash apply --index 2 [/code] or use stash{0}: [code language="xml"] &gt; 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"] &gt; 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...