Talks & Videos

Nowadays, it seems that going to a tech conf is the only way to prove that you are a developer (?)
You can learn something from anything anyway, here are some videos I watched recently.

Angular

Introduction to Angular 8 – Alain Chautard
Handling Angular Forms Without Losing Your Sanity – Jennifer Wadella
These ARE the Angular Tips You’re Looking For | John Papa
Angular For Enterprise | Stephen Fluin
“N Things You Didn’t Know About the Router” | Deborah Kurata
The magic of template reference variables – Alain Chautard
How to Dynamically Insert & Remove Form Controls in Angular

JS

dotJS 2018 – John Papa – Choosing Your JavaScript Framework
Ready for Readable Code? – John Papa
The Future of Machine Learning & Javascript | Asim Hussain

Others

Keynote NDC Sydney 2016: If I knew then what I know now – Scott Hanselman

#angular #videos #talks

BrowserSync, Gulp and TypeScript

I was creating a simple web app with VueJS (without cli, no single file component) and I thought it would be good to have a local server which watches changes, auto-transpiles TypeScript and later maybe builds(minify, terser, copy files etc.) for the production. By using BrowserSync & Gulp, a typescript project can be easily watched, and the browser can be auto-reloaded in case of any changes. Let’s assume we have .ts files and index.html in “src” folder. The following gulpfile compiles the TS files into “dist” folder, watches for the changes and reloads the browser in case of changes. It still requires the build function for the production but it would be similar to development function, maybe terser plugin can be added.

const { series, watch, src, dest } = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var tsProject = ts.createProject('tsconfig.json');
var server = require('browser-sync').create();

const paths = {
    scripts: {
        ts: 'src/*.ts',
        dest: 'dist/js/'
    }
};

function reload(done) {
    server.reload();
    done();
}

function serve(done) {
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    done();
}


let development = function() {
    src('./index.html').pipe(dest('./dist/'));
    src('./css/**/*').pipe(dest('./dist/css'));
    src('./src/*.json').pipe(dest('./dist'));
    src('./assets/**/*').pipe(dest('./dist/assets/'));
    return tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(tsProject())
        .pipe(sourcemaps.write())
        .pipe(dest('./dist/js/'));
};

const mywatcher = () => {
    console.log(paths.scripts.ts)
    const watcher = watch(paths.scripts.ts, series(development, reload))
    watcher.on('change', (path) => {
        console.log(`File ${path} was changed.`);
    });
};
const dev = series(development, serve, mywatcher );
exports.default = dev;

There is a gulp plugin for the same purpose: https://www.npmjs.com/package/gulp-webserver
Links:
1. https://www.browsersync.io/docs/gulp
2. https://gulpjs.com/docs/en/api/watch
#typescript #gulp #vuejs

Angular – Scroll to a…

Angular – Scroll to a div in child component

Child Component

<div  #scrollToPoint>
div to scroll
 </div>

Return scroll point to parent

 @ViewChild('scrollToPoint', { static: false }) scrollToPoint: ElementRef;
  constructor() { }
  ngOnInit() {
  }
  getScrollPoint() {
    return this.scrollToPoint;
  }

Parent Component

  @ViewChild(ChildComponent, { static: false }) childComponent: ChildComponent;
 scroll() {
    this.ChildComponent.getScrollPoint().nativeElement.scrollIntoView();
  }

This would work fine. If you have another button in a child and want to listen to that to scroll, you can add an event emitter:

Parent HTML

<app-child-hero (startHereClick)="scroll()"></app-child-hero> >

Child HTML

<button type="button" class="btn btn-danger" (click)="startHere()">Start Here</button>

Child Class

 @Output() startHereClick: EventEmitter<boolean> = new EventEmitter();
 startHere() {
    this.startHereClick.emit(true);
  }

#angular

#scrolltopoint

Azure – Application Settings and Connection Strings

Resources for storing connection string and application string in azure apps.

  1. https://azure.microsoft.com/es-es/blog/windows-azure-web-sites-how-application-strings-and-connection-strings-work/
  2. https://mderriey.com/2018/08/21/azure-app-service-connection-strings-and-asp-net-core/
  3. https://docs.microsoft.com/en-ca/azure/app-service/configure-common#connection-strings
  4. https://docs.microsoft.com/en-ca/azure/app-service/app-service-key-vault-references

#azure #azure-database

Azure SQL Database (MSSQL) -…

Azure SQL Database (MSSQL) – Working with JSON Data

SELECT

SELECT Name, Surname,
  JSON_VALUE(jsonCol, '$.info.address.PostCode') AS PostCode,
  JSON_VALUE(jsonCol, '$.info.address."Address Line 1"') + ' '
  + JSON_VALUE(jsonCol, '$.info.address."Address Line 2"') AS Address,
  JSON_QUERY(jsonCol, '$.info.skills') AS Skills
FROM People
WHERE ISJSON(jsonCol) > 0
  AND JSON_VALUE(jsonCol, '$.info.address.Town') = 'Belgrade'
  AND Status = 'Active'
ORDER BY JSON_VALUE(jsonCol, '$.info.address.PostCode')

Modify

 
DECLARE @json NVARCHAR(MAX);
SET @json = '{"info": {"address": [{"town": "Belgrade"}, {"town": "Paris"}, {"town":"Madrid"}]}}';
SET @json = JSON_MODIFY(@json, '$.info.address[1].town', 'London');
SELECT modifiedJson = @json;

Convert JSON collections to a rowset

DECLARE @json NVARCHAR(MAX);
SET @json = N'[
  {"id": 2, "info": {"name": "John", "surname": "Smith"}, "age": 25},
  {"id": 5, "info": {"name": "Jane", "surname": "Smith"}, "dob": "2005-11-04T12:00:00"}
]';

SELECT *
FROM OPENJSON(@json)
  WITH (
    id INT 'strict $.id',
    firstName NVARCHAR(50) '$.info.name',
    lastName NVARCHAR(50) '$.info.surname',
    age INT,
    dateOfBirth DATETIME2 '$.dob'
  );
 

Resources & more:

  1. https://cloudblogs.microsoft.com/sqlserver/2016/01/05/json-in-sql-server-2016-part-1-of-4/
  2. https://channel9.msdn.com/Shows/Data-Exposed/SQL-Server-2016-and-JSON-Support
  3. https://azure.microsoft.com/es-es/blog/json-support-is-generally-available-in-azure-sql-database/
  4. https://docs.microsoft.com/en-us/sql/relational-databases/json/json-data-sql-server?view=sql-server-ver15
  5. https://docs.microsoft.com/en-us/sql/relational-databases/json/store-json-documents-in-sql-tables?view=sql-server-ver15
  6. https://docs.microsoft.com/en-us/sql/relational-databases/json/index-json-data?view=sql-server-ver15

MySQL from version 5.7 has JSON support: https://www.sitepoint.com/use-json-data-fields-mysql-databases/

#azure #azure-database #json #mssql-json

Visual programming with hardware and Node-RED

A good podcast about node-red from the creators.

JS Party 95: Visual programming with hardware and Node-RED – Listen on Changelog.com

BigQuery with .NET Core

Here is a sample respository ready to be injected to a ASP.NET Core application.

   public class SelfViewRepository : ISelfViewRepository
    {
        private readonly string _projectId;
        private readonly GoogleCredential _gcpCredential;

        public SelfViewRepository(string projectId, string credentialFile)
        {
            _projectId = projectId;
            _gcpCredential = GoogleCredential.FromFile(credentialFile);
        }

        public async Task<BigQueryResults> GetData(string query)
        {
            BigQueryClient client = BigQueryClient.Create(_projectId, _gcpCredential);

            BigQueryJob job = client.CreateQueryJob(
                sql: query,
                parameters: null,
                // options: new QueryOptions {UseQueryCache = false});
                options: new QueryOptions { });
            var data = await job.GetQueryResultsAsync();
            // Wait for the job to complete.
            job.PollUntilCompleted();
            // Display the results
            return data;
        }
    }

#googlecloud #bigquery #aspnetcore