Understanding Typescript

Possibly save 1 hour of your time: Here are some reminders when using Typescript.

  • Resource Link – Create variable using let rather than var:

https://www.typescriptlang.org/docs/handbook/variable-declarations.html

  • Resource Link – Include other javascript by using node.js npm to install both the library itself and typed-definition for the library. In this example, I am installing mapbox-gl and its typed-definition. You can go to https://www.npmjs.com and find your typed-definition.

  npm install mapbox-gl

  npm install –save @types/mapbox-gl

If you cannot find it in npm package manager, you can try Typed definition in github.

 

 

Advertisements

Understanding Stencil.js

Possibly save 1 hour of your time: Here are some resources that I have used to learn Stencil.js.

Decorators

  • @Prop
    • Props are custom attribute/properties exposed publicly on the element.
    • string, number, boolean, object, array
    • Children components should not know about or reference parent components, so Props should be used to pass data down from the parent to the child.
    • By default, when a member decorated with a @Prop() decorator is set, the component will efficiently re-render.
    • It’s important to know, that @Prop is immutable from inside the component logic. Once a value is set by a user, the component cannot update it internally.
    • Within the component class, the Props are accessed via the this operator.
    • Externally, Props are set on the element.
    • They can also be accessed via Javascript from the element.
  • @PropWillChange and @PropDidChange
  • @State
    • can be used to manage internal data for a component. This means that a user cannot modify the property from outside the component, but the component can modify it how ever it sees fit.
    • Any changes to a @State() property will cause the components render function to be called again.
  • @Method
    • used to expose methods on the public API.
    • Functions decorated with the @Method() decorator can be called directly from the element.

 

Videos

Announcement

https://www.youtube.com/watch?v=UfD-k7aHkQE

Getting Started

https://www.youtube.com/watch?v=MqMYaT1GlWY

 

Articles

Understanding Component, Prop, State, Event, EventEmitter, Listen:

https://coryrylan.com/blog/create-your-first-web-component-with-stencil-js

Understanding Constructor:

https://codecraft.tv/blog/2017/10/10/smile-to-unlock-webcomponent-stenciljs/

Understanding :

https://www.javascripttuts.com/creating-a-todo-application-using-stencil/

 

Lots of resources here:

https://github.com/mappmechanic/awesome-stenciljs/

Node.js npm cannot install fsevents node modules

Possibly save 1 hour of your time: When you want to use node.js npm package manager to install dependencies, you may encounter the following error when you run:

  npm install

fsevents node_modules.png

Check your npm version:

  npm -v

Revert to a version that works. I am using npm 5.0.4:

npm i -g npm@5.0.4

You can also check your any version dependency at global level:

  npm list -g

If the above doesn’t work, then you can upgrade npm version to latest as follows:

  npm install npm@latest -g

Related resource: https://github.com/npm/npm/issues/17671

 

Understanding Javascript Library Frameworks

Possibly save 1 hour of your time: There are many javascript libraries and frameworks. Which one will you use?

I have compiled some really good links below from others sites on recent trends. Please note they are not my work.

Angular vs. React vs. Vue: A 2017 comparison

https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176

Vue.js Is Good, But Is It Better Than Angular Or React?

https://www.valuecoders.com/blog/technology-and-apps/vue-js-comparison-angular-react/

Book JavaScript Frameworks for Modern Web Dev

Display AngularJs ng-template directly

Possibly save 1 hour of your time: There may be times when you want to display an Angular template directly. You can use ng-include and single quote around the path to the file:

<div ng-include src="'views/sidepanel.html'" ng-controller="SomeController"></div>

You can also specify the controller using ng-controller.

Book: AngularJS: Up and Running: Enhanced Productivity with Structured Web Apps

Understanding Razor Views

Possibly save 1 hour of your time: The following are some code tips on what you can do on a razor view. Razor view has a .cshtml file extension.

The following shows the use of no Layout (similar to master page concept). If you didn’t set Layout to empty, it will default to use Views/Shared/_Layout.cshtml. You can use ViewBag to pass data between controller and view.

@{
ViewBag.Title = "Map";
Layout = "";
}

The following shows how you can include a Javascript and CSS reference in the element.

@section head {
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
		<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
}

Book: Instant Razor View Engine How-to

SQL Server import wizard treat blank as null instead of zero 0

Possibly save 1 hour of your time: There are times when you need to import csv file with a nullable integer column. However, when you use the SQL Server database >> Task >> Import wizard, you will notice the result shows integer 0 instead of null values when the import csv file shows blank.

There is no feature on this wizard to treat blanks as nulls. The alternative is to use SQL Server Integration Service (SSIS).

But you can do it via an SSIS package to do ETL on the data from the CSV file into a SQL Server database.

You can use Data Flow Task. Inside the Data Flow Task, you can have a Flat File Source and an OLE DB Destination.

import csv to database.png

Click on OLD DB Destination, and there is option to Keep nulls.

OLE DB Destination - keep nulls

If you don’t know SSIS, you can always use the import data feature. In the last step, there is an option to Save SSIS Package and choose File System and the next screen will ask where you want to save. After you saved, then you can load that into a SQL Server Integration Services project.

save ssis package

Book:Professional Microsoft SQL Server 2012 Integration Services

Visual Studio database project schema compare (.scmp) show delete all objects

Possibly save 1 hour of your time: If you are using schema compare in your database solution project within Visual Studio, the initial compare shows nothing on the project vs  your target database. It tells you the difference is to delete all objects such as tables and stored procedures.

The problem was that the scripts (.sql) files are added to the folder outside of Visual Studio. You need to right click on the folder and choose Add >> New Item. Then you can select under each SQL Server menu sub category and the SQL object.

sqlobject.png

Book Microsoft SQL Server 2016: A Beginner’s Guide, Sixth Edition