css media queries mobile

http://stephen.io/mediaqueries/#iPhone

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

stock foto's gratis

Pexels.com

optimaliseer images
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

docker ip address naar container

inspect network

docker network ls
vind de netwerken

docker network inspect <netwerk>

bridge is een netwerk
inspect geeft per container in het netwerk de ip adressen terug.

react intro

componenten:


via class of via functie;
Class heeft mijn voorkeur inzake uitbreiding.
Component heeft state en kan props verwerken

een class overerft van React.Component
Er is altijd een constructor die props kan ontvangen en in de state zetten.
wanneer het component door
de class heeft altijd een render methode om de html te genereren

vervolgens zijn er 2 pagecycle methodes
1. componentDidMount
    wordt uitgevoerd als het component gerenderd is
2. componentWillUnmount
    wordt uitgevoerd las het component van de DOM is verwijderd

Om data in de state zetten roep je de functie setState aan.

Om een functie aan te roepen vanuit een event bijvoorbeeld moet je de functie in de class definieren als class field syntax;

boundFunction  = (e) => { e.preventDefault(); console.log('log...'); }

Om het component op de pagina te plaatsen wordt vanuit ReactDom.render (, htmlelement)
aangeroepen, als eerste wordt de constructor aangeroepen.

import React from 'react';

class MyButton extends React.Component {

constructor(props) {

super(props);

this.state = { name: props.name, href: props.href }; //only from constructor, otherwise use setState();

}

componentDidMount() {

//nadat het component gerenderd is

this.setState((state, props) =>

({ name: state.name + props.name })

);

}

componentWillUnmount() {

//wanneer is verwijderd van dom

}

handleClick = (e) => {

e.preventDefault();

this.setState( { name: e.toString()});

}

render() {

return (

<a href={this.state.href} onClick={this.handleClick}>{this.state.name}</a>

);

}

}

export default MyButton;

Nieuw app aanmaken:
npx create-react-app my-app

docker build

docker file in root van project

FROM mcr.microsoft.com/dotnet/core/aspnet:2.2

WORKDIR /app

COPY /bin/Release/netcoreapp2.2/publish ./

ENTRYPOINT ["dotnet", "abc.dll"]

build image:

docker build . -t [tagname]


create container for image

docker create --name [containername] -d -p 4598:80 [imagename]

for angular:

FROM nginx:latest

COPY /dist/appname /usr/share/nginx/html

docker, mysql 8, nodejs

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'MyNewPass';

flush privileges

push nuget package from vscode

nuget works with csproj file to create nuget package

<PropertyGroup>

<TargetFramework>netstandard2.0</TargetFramework>

 <GeneratePackageOnBuild>true</GeneratePackageOnBuild>

 <Version>1.0.3</Version>

 </PropertyGroup>

Will create [Assemblyname].1.0.3.nupkg file in configuration folder to build (dotnet build -c "Release")
from commandline
dotnet nuget push -s Source -k personal Tests.1.0.5.nupkg

be sure there is a nuget.config file in the root of your project with the sources you will restore / push the packages from

see: http://patrickvos.blogspot.com/2019/05/package-sources-in-vs-code.html

asp.net core service lifetime for DI

Service Lifetimes:

1. Transient
2. Scoped
3. Singleton

Transient
Every request from the service container, it will be recreated.

Not to be confused with every controller request. but if in the pipeline of your request it is provided in multiple constructors and those are called from the service container, it will be instantiated as a new instance

Scoped
The object is instantiated once per client request / per connection

Singleton
The object is instantiated only once for all client calls.

package sources in vs code

add nuget.config file in root

contents:

 <configuration>
    <packageSources>
        <add key="NuGet official package source" value="https://api.nuget.org/v3/index.json" />
        <add key="[source name]" value="https://blbla.pkgs.visualstudio.com/_packaging/Core/nuget" />
    </packageSources>
    <packageSourceCredentials>
    <[source name]>
        <add key="Username" value="email account" />
        <add key="ClearTextPassword" value="password" />
    </[source name]>
    </packageSourceCredentials>
    <trustedSigners>
        <author name="microsoft">
            <certificate fingerprint="[fingerprint]" hashAlgorithm="SHA256" allowUntrustedRoot="false" />
        </author>
    </trustedSigners>
</configuration>

https://docs.microsoft.com/nl-nl/nuget/reference/nuget-config-file
   
   
   
       
       
   
   
   
       
           
       
   

using table valued parameters from .net core

1. create user defined table type in sql

create type typename  as Table(
 column1 varchar(10) not null,
column2 varchar(20) not null,
primary key clustered
([column1] asc)
with (ignore_dup_key)
)
go


2. use table type as parameter in stored proc

create proc x (
    @tabletype typename  READONLY
)
as
begin
....
end

3. map your object list to a sqlclient DataTable type.

DataTable x = Mapper.Map(datalist);

4. create parameter in .net

var param = new SqlParameter(name, SqlDbType.Structured);
param.TypeName = "typename"
param.Value = DataTable;

5 call the stored proc from the dbcontext

_context.Database.ExecuteSqlCommand("exec sqlprocname @param", param);

see also:

https://docs.microsoft.com/en-us/dotnet/framework/data/adonet/sql/table-valued-parameters

angular with scss

ng new my-sass-app --style=scss

npm install bootstrap --save

//add bootstrap to styles.scss
@import "../node_modules/bootstrap/scss/bootstrap.scss";

build with all dependencies

in .net standard/core project if you want to include all nuget package assemblies
add an element CopyLocalLockFileAssemblies to the project file


 <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
    <CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>
  </PropertyGroup>