Skip to main content

Posts

Showing posts from December, 2016

vscode install offline packages

To install vscode package offline, you need to download those extension by following the resource path as follows :-


https://${publisher}.gallery.vsassets.io/_apis/public/gallery/publisher/${publisher}/extension/${extension name}/${version}/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage

Goto https://marketplace.visualstudio.com and browse the extension you're looking for.

You probably get something like this :-



This gives us the 'publisher' and package name.

Finally to get our version number we look at the bottom right corner of the extension repository as shown here.




All you need is to fill up the template url above with the right info.

Examples extensions you can download are as follow (might be out of date) :-

Python extension.

https://donjayamanne.gallery.vsassets.io/_apis/public/gallery/publisher/donjayamanne/extension/python/0.5.5/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage

Typescript Javascript Grammar

https://ms-vscode.gallery.vsassets.io/_apis/p…

Bye bye Atom - I switching to Visual studio code

After days of trying out Atom with typescript, i finally gave up. Autocomplete (intellisense) is not working and end up losing alot of time.

I switch to Visual Stuido code and install 2 main component and I'm good to go - i have all the autocomplete for javascript and typescript that i needed. This not just include javascript method for string like indexOf but also include Angular2's EventEmitter.

The component that I installed are :-

a) Typescript and Javascript grammar

b) Angular 2 typescript snippet by John Papa.



Check out my autocomplete. My development time just went up by 200%. ;)







angular2 - 2 ways of getting value from ngmodel

There are 2 ways you can get value from ngModel. In this example, we have an input and whenever you change the text, it will always keeps your value updated.

#1. via Get / Set method

The first method uses, get and set to get value from model. Whenever a value is set, it triggers a custom event which parent class can listen to.



#2 via ngModelChanged Event -

If you decided not to do it that way, you can use ngModelChanged event to get value  as illustrated in codes below :



#3 Listening to onkeydown events - which will not be discussed here. :)

angular2 bootstrapping causes my @input and @output gone bezerks!

I hate to blog about stupid mistake, especially my own. So I created my AppComponent which loads ResetComponent. Well, everything continue to work except @Input, @Output and EventEmitter.

@Input value cannot be assigned from parent to child.

@Output doesn't work as event are triggered but not caught by parent.









The fix is to remove ResetComponent from Bootstrap like what we have below :-

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, ResetComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }




Angular2 Components - Did you know that these are valid when defining Angular2 @Component

       selector: undefined,
        inputs: undefined,
        outputs: undefined,
        host: undefined,
        exportAs: undefined,
        moduleId: undefined,
        providers: undefined,
        viewProviders: undefined,
        changeDetection: ChangeDetectionStrategy.Default,
        queries: undefined,
        templateUrl: undefined,
        template: undefined,
        styleUrls: undefined,
        styles: undefined,
        animations: undefined,
        encapsulation: undefined,
        interpolation: undefined,
        entryComponents: undefined

Adding images to readme.md in github

You can use the following text to include images to readme.md as shown below :-

![alt tag](http://url/to/img.png)
To get the url, well that's abit tricky. There is a quick way to get the link to image.

All you have to do is browse github to your image. Click on that image and your browser will load. At this point, copy this link and paste it to the command text above and you get your image.

Easy stuff!:)

npm unable to start - getting TS2304 error

One fine day, i tried to start my project with npm start and bump into this error :-

node_modules/@angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name 'Set'.

Yes it is a typing error and just issue the following command to fix it.

npm install --save-dev @types/core-js


Try npm start again.

Asp.net core integration with angular2

This is a tutorial to get your aspnet core project integrated with Angular2.  I'm using VS2015 community edition.

Code can be download from here. Press F5 and browse to http://localhost/index.html to see your Angular2 in action.

Long story ......begins.

First thing you gotta do is create an ASP.Net core project. Here I just used MVC project and click next till the project is created. I did this because this project automatically includes static files configuration in the owin pipeline. It hard to setup using blank project because you need to get the dependencies right.

Next you need to modify startup files to allow serving of index.html static files.



Next I created the package.json file. It's pretty much the same as Angular2 Quickstart example.



VS2015 might try to resolve project dependencies from now and you probably have to wait for a bit.

Add another file called tsconfig. Again copy and paste job.



Next create a gulp.js files as shown below :-



We wanted to copy the required…

android recycleview and fragment

Creating Android Recycleview is pretty straight forward. All I need to do is :-

a) Setup Adapter

b) Set Layout


Let's walk through the process. First we need to include proper information in gradle



Then we need to layout our recycleview



Now lets create some adapter.



Noticed that we our adapter contains a view holder - just think of viewholder as your android row level layout file that has been inflated.
We are able to get a reference to our control as shown in the code below :-

public ViewHolder(View itemView) { super(itemView);title = (TextView) itemView.findViewById(R.id.title);description = (TextView) itemView.findViewById(R.id.description);fullNews = (TextView) itemView.findViewById(R.id.fullNews);}

To get it to work we need the code below. All we need here is to configure data adapter and set our layout. Here, I am using DividerItemDecoration that comes with Android.

recyclerView = (RecyclerView) view.findViewById(R.id.recycler_view);adapter = new NewsDataAdapter(news);Recy…

Powershell New-WebServiceProxy giving underlying connection is closed

When using powershell to invoke a webservice using new-webserviceproxy, you might encounter the following message, 'The underlying connection was closed: Could not establish trust relationship for the SSL/TLS secure channel.

To solve this, all you gotta do is type the following in Powershell.

[System.Net.ServicePointManager]::ServerCertificateValidationCallback = {$true}

And then you can go ahead to invoke your web service using something like this

$svc = New-WebServiceProxy -Uri 'https://servername:9091/QuoteManager/QuoteManagerService.svc?wsdl'

That solved the issue for me.


Owin component : Modifying owin response

Writing Owin component is really easy. Changing response's body content can be tricky.

Let's say you need to strip out confidential information from your http/https response before passing it to the client. Sounds pretty easy but tricky at the same time.

Key points to note is that :-

1. Must invoke the next owin component in the pipeline before reading response as string. (maybe that's obvious)

Try to use filter to control flow to your owin component. As you can see below, code 21, i running a check on Request.Path to prevent application to flow through (modifying anything in my Owin component).

2.When modifying content, you need to set context.Response.ContentType, StatusCode and ContentLength to the size of data you're trying to push across.

I used memorystream to channel my output to context.response.body

3. Must use code starting from Line 69 to copy content to context.Response.Body. Your owin pipeline can get pretty unable if you don't do this.

Full source fo…