Posts

Showing posts with the label Web development

XSLT example cheat sheet

Image
A cheat sheet demonstrating an XSLT example for a number of commonly used transformation technuiques. For reference a link to a free online XSLT formatter . Shortcuts to each XSLT example covered in this cheat sheet are listed as follows: 1. Using for-each to create a table 2. Tokenizing a delimited string using XSLT versions 1.0/2.0 3. Using apply-template to apply template to the element or element’s child nodes 4. Using the normalize-space function to remove unwanted spaces 5. Convert string to upper case or lower case 1. using for-each to create a table (Back to top) An XSLT example to create a simple table XML [code language="xml"] <?xml version = "1.0"?> <class> <student id= "393"> <firstname>Andrew</firstname> <lastname>Jones</lastname> <marks>85</marks> </student> <student id= "593"> <firstname>Den...
Post a Comment
Read more

How to change the Wordpress database table prefix

Image
A simple guide, to explain how to change the Wordpress database table prefix of your WordPress installation from its 'wp_' into something else . It is recommended that you change this because all your login details are stored in this database, making it a popular target for hackers. Changing the prefix will make it harder for them to break in. Step 1: Change the table prefix in wp-config.php This is done via the CPanel > File Manager: In file manager, navigate to the root folder and identify the wp-config.php file. Right-click on and select edit or select Edit in the menu bar at the top of your screen. Locate the following entry: [code language="text"] $table_prefix = 'wp_'; [/code] Replace 'wp_' with something else; in this case, we replaced it with 'xyz_': [code language="text"] $table_prefix = 'xyz_'; [/code] Step 2: Change the table prefix in the database Open your database in PhpMyAdmin: Se...
Post a Comment
Read more

Using flex to layout items in css

Image
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.<...
Post a Comment
Read more

Getting started with Aurelia routing in Visual Studio Code

Image
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...
Post a Comment
Read more

Getting started with Aurelia in Visual Studio Code

Image
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...
Post a Comment
Read more

My Aurelia cheat sheet

Image
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...
Post a Comment
Read more

Using TypeScript in Visual Studio 2017

Image
See this link for very similar instructions: https://www.typescriptlang.org/docs/handbook/asp-net-core.html Step 1: Create a new Asp.Net Core project Select Empty project: Click OK. Step 2: Add Microsoft.AspNetCore.StaticFiles via NuGet Right click on Dependencies and select Manage NuGet Packages: Select Browse and search for 'Microsoft.AspNetCore.StaticFiles': Select this item and click Install. Step 3: Add a scripts folder for TypeScript First update the body of Configure in Startup.cs file as shown: Startup.cs [code language="csharp"] using Microsoft.AspNetCore.Builder; using Microsoft.Extensions.DependencyInjection; namespace AspDotNetCore { public class Startup { // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices...
Post a Comment
Read more

Using basic authentication in a Web API application

Image
Some instructions on how to create implement basic authentication in a Web API application. Just follow what is shown in the steps and screenshots as shown: Step 1: Create a new ASP.NET Web application in Visual Studio: [caption id="attachment_8209" align="alignnone" width="826"] basic authentication in a Web API application[/caption] Step 2: Create a new authentication filter I have created a new folder with which to put any new filter classes: Create a new class called BasicAuthenticationAttribute. This needs to inherit from AuthorizationFilterAttribute. [code language="csharp"] using System; using System.Net; using System.Net.Http; using System.Security.Principal; using System.Text; using System.Threading; using System.Web.Http.Filters; namespace WebApiAuthenticate.Filters { public class BasicAuthenticationAttribute : AuthorizationFilterAttribute { public override void OnAuthorization(HttpActionContext acti...
Post a Comment
Read more