Skip to main content

Peter Marshall

Bootstrap does not find jquery

1 min read

When building nearby.cafe, I had an issue where bootstrap was not finding the dependancy on jquery.

which looks like this

Module not found : error : Can't resolve 'jquery' in node_modules\bootstrap\dist\js'

 

The solution

npm install --save-dev resolve-url-loader 
npm i --save-dev  bootstrap-loader tether jquery

Peter Marshall

Create react app starter

1 min read

I had not don ethis in a while. Here it is recorded.

Assumes you have npm.

create direcctory (mkdir whatever)

cd whatever

npm init whatever

npm install --save-dev create-react-app

npx create-react-app whatever

cd whatever

npm start

---- it should run

start a new command window --- I use conemu

go to the directory you just created

if you have vscode installed type code .

thats code (dot)

update the code. refresh browser bingo...

 

 

Peter Marshall

Using Base64EncodedStrings for images

3 min read

The images are in a legacy system (asp.net aspx pages). Some are generated dynamicly by that system (bar codes). The new system, mobile freindly, angualar, asp,net mvc requires to print docuements with these images in. So I get the content for the documents to be printed, and find it has img tags in it and these point to the relative path in the aspx application. 

I extract the relative path from the image tags, nice regex here. 

string imgTagSelectionPattern = @"<img.*?src=""(?<url>.*?)"".*?>";

Get the image and convert it to a base64encoded string

private string GetImageContentAsBase64EncodedString(Uri url)
{
    var content = string.Empty;
    try
    {
        var request = (HttpWebRequest)WebRequest.Create(url);
        using (var response = (HttpWebResponse)request.GetResponse())
        {
            if (response.StatusCode == HttpStatusCode.OK)
            {
                var receiveStream = response.GetResponseStream();
                if (receiveStream != null)
{
     byte[] outData;
     var tempMemStream = new MemoryStream();
     receiveStream.CopyTo(tempMemStream);
     outData = tempMemStream.ToArray();
     content = Convert.ToBase64String(outData);
}                  content = Convert.ToBase64String(outData);                 }             }         }     }     catch     {         //this is the base64 encoding of an 'image not found' image         content = "iVBORw0KGgoAAAANSUhEUgAAAJYAAAAaCAIAAADaETIWAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAG+SURBVGhD7ZbrdYMwDIUzFwMxD9OwTIZJLT+kK4NSTsGhavX9smW9b06SxytwTkjonpDQPSGhe/65hM9lehDT8qyWq1nngckzpyRM7T3mtV5+MSTUbp8fGCAkvIR3Eg7eryMJ05ZSp2TIJGv7jsIJ2IbSc1ChPOx6VooiHIYbgrBtItu11diGV6P0IJIU+14bkmZaFk8Spo7V1uRSZ1jnNowythMZazZIDMdGyS/x7T3bmy9eILNGiiescB2t+7XaaFnJDCWGcKWEPKe6gJPAHujK2+EDoZJltIWde0fJsk1RwUJmuFHuYBtYYgwflZDsQjHKiOJIJwUnyxi7g0IZcdMBgBR/E26UO9gGlhjDByXE2dR+mPb6zdjG7rQZs/QvDBYyw41yB9vAEmO4R0I6spE9BXDd4d1O+YEubXd4VkhswgyXbrILlttrg9zB5W/9FtIxk/+o9UaCpy3DV7odWLsrlwYGtWz9MlVswggXe/4HWp/sNqT5eU3nvurFnJLwPDQsTNivNDjAzRLSx1s+yZ2gwSFulhC/dBKh3w+4XcLgLCGhe0JC94SE7gkJ3RMSuickdE9I6J6Q0Dmv1xcjhYT1jnd5CwAAAABJRU5ErkJggg==";     }     return content; }

Then prepend it with the following "data:image/png;base64," replace the original src string with the new string and deliver all that client side in the new application.

Peter Marshall

Pass an array of int to ASP.NET WEBAPI C#

3 min read

Today I had to provide an endpoint that accepts an array of integers. As it happens this was for a DELETE operation. So an existing edpoint api/link/{id}  exists. The problem was I could not find any guidance for a RESTFUL url for delete a whole bunch of links. Initialy I proposed passing the array in the body, this was rejected as angular was not able to call the DELETE and pass a body.

So, the url is going to look like api/link/2,4,67,4

 

Create a Model to contain the passed in list of int.

public class LinkIds {     public List<int> Ids { getset; }     public List<KeyValuePair<int,bool>> Results { getset; } }

You need to create a model binder that inherits from IModelBinder.

public class LinkIdModelBinder : IModelBinder
{

And that requires a BindModel method.

public bool BindModel(HttpActionContext actionContext, ModelBindingContext bindingContext) {   

Within the BindModel method we can validate that the type is correct

if (bindingContext.ModelType != typeof(LinkIds)) {     return false; }

Validate the name.

var val = bindingContext.ValueProvider.GetValue(bindingContext.ModelName); if (val == null) {     return false; }

Validate that we have got a vlaue.

var key = val.RawValue as string; if (key == null) {     bindingContext.ModelState.AddModelError(bindingContext.ModelName, "Wrong value type");     return false; }

check we have integers.

var values = val.AttemptedValue.Split(','); var ids = new List<int>(); foreach (var value in values) {     int intValue;     int.TryParse(value.Trim(), out intValue);     if (intValue > 0)     {         ids.Add(intValue);     } }

Get the passed value into our bindingContext, and return everything fine.

if (ids.Count > 0) {     var result = new LinkIds     {         Ids = ids     };     bindingContext.Model = result;     return true; }

Or if there is an issue report it.

bindingContext.ModelState.AddModelError(     bindingContext.ModelName, "Cannot convert value to list of int."); return false;

 

Now we can create the endpoint in the controller as follows

[HttpDelete]

[VersionRoute("{linkIds}", 1, true)]

[ResponseType(typeof(bool))] public async Task<IHttpActionResult> DeleteAllAsync([ModelBinder(typeof(LinkIdModelBinder))] LinkIds linkIds) {

And that works

linkIds.Ids can be processed as a list.

 

Peter Marshall

Awesome Electron

1 min read

Because I am writing an app in electron. I found this page, to be very very useful. awesome-electron

I am using bozon to get up amd running and provide the scafolding.

 this is the majic launch file that alows debugging in vs code

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "program": "${workspaceRoot}/main.js",
      "protocol": "legacy"
    },
    {
      "name": "Debug Renderer Process",
      "type": "chrome",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "runtimeArgs": [
        "${workspaceRoot}/main.js",
        "--remote-debugging-port=9222"
      ],
      "webRoot": "${workspaceRoot}"
    }
  ]
}

Peter Marshall

"The Drive Home"

0 min read

Peter Marshall

Peter Marshall

Run a batch file at boot in Windows 10

1 min read

Run a batch file at boot in Windows 10

  1. Create a shortcut to the batch file.
  2. Once the shortcut has been created, right-click the file and select Cut.
  3. Press the Start button and type Run and press enter.
  4. In the Run window, type shell:startup to open the Startup folder.
  5. Once the Startup folder has been opened, click the Home tab at the top of the folder and select Paste to paste the shortcut into the folder.

Peter Marshall

1 min read

links 

https://github.com/prettydiff/wisdom/blob/master/Web_Education.md

https://github.com/prettydiff/wisdom/blob/master/Web_Interview.md

 

 

Just updated angular cli on my weight monitor 2017 B project

using the following command

npm install -g @angular/cli@latest

Peter Marshall

Angluar/cli

1 min read

Just updated angular cli on my weight monitor 2017 B project

using the following command

npm install -g @angular/cli@latest