Thursday, December 29, 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/public/gallery/publisher/ms-vscode/extension/typescript-javascript-grammar/0.0.13/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage

John Papa Angular2 extension.

https://johnpapa.gallery.vsassets.io/_apis/public/gallery/publisher/johnpapa/extension/Angular2/1.0.2/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage

Once you have download it, rename to a more meaningful file name with .vsix extension. And you can install using the menu as shown below  :-












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%. ;)







Monday, December 26, 2016

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 { }




Sunday, December 25, 2016

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

Saturday, December 24, 2016

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!:)

Thursday, December 22, 2016

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.

Wednesday, December 21, 2016

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 javascript files from node_modules to a libs directory in aspnetcore's wwwroot folder.

Goto wwwroot and create file called index.html with the following contents.



Finally we need to add our angular components. Create a folder called app in wwwroot. You can copy and paste from angular quickstart cuz that's what i did.

In app folder, create app.component.ts, app.module.ts, main.ts.







Finally, we need to have our systemjs.config.js file in our project.



From the command prompt, run "npm start" -> as this process is required to start typescript automatic compilation from .ts to .js file.

If you encounter issue like TS2304 : Cannot find name 'set' - please try :

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










Sunday, December 18, 2016

Using Powershell DSC to set IIS recycle time

I have a task to set IIS recycle time to say "5:00:00" am in the morning.  So here is how i do it using Powershell DSC and if you want to find more information about xWebAdministration, you can go here.

Sample code I came out with :-





Friday, December 16, 2016

Pretty cool tools for Android development online


Found some pre-tt-y interesting tools online that's helpful for Android development

Android asset studio 

https://romannurik.github.io/AndroidAssetStudio/index.html

Material design palette with sample layout 

https://www.materialpalette.com/grey/brown


Will be updating from time to time.

Wednesday, December 14, 2016

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);RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getContext());
recyclerView.addItemDecoration(new DividerItemDecoration(getContext(), LinearLayoutManager.VERTICAL));recyclerView.setLayoutManager(layoutManager);recyclerView.setAdapter(adapter);recyclerView.setItemAnimator(new DefaultItemAnimator());


For a complete list of the project, please go here.


Android Studio 2.0 start up error : java.lang.NullPointerException

Earlier this week, I had a crash while developing on Android Studio 2.0 and i get NullPointerException trying to restart. It was a really confusing situation.

The fix is to edit Android Studio\bin\idea.properties and add the following and restart Android Studio.

disable.android.first.run=true

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.


Tuesday, December 06, 2016

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 for my implementation is given here.