A Programmer with Microsoft tools

Category: TILT

  • TILT- React Material UI and Navigation–part 29

    I wanted some good looking on the site – so I choose https://mui.com/ It does not have ready made navigation like in Angular – so I need to make on myself. Fortunately,it has the all the things that one need: Media Query: https://mui.com/material-ui/react-use-media-query/ App Bar: https://mui.com/material-ui/react-app-bar/ The final code looks like that const theme =…

  • TILT- Angular2React–part 28

    I was thinking to learn React – and transform the Angular site to React. The steps that I took are the folllowing: Learn React from https://reactjs.org/tutorial/tutorial.html – and learning that React is a library,not a framework Learn useEffect,useState with Hooks – very easy Learn that React can have a TypeScript template – it will make…

  • TILT-REACT Router

    Now to see how to handle FrontEnd routing ( From Backend it is simple – just transfer to index.html and React will handle it ) The long established in React world seems to be https://github.com/remix-run/react-router . There is a new kid,https://github.com/Paratron/hookrouter – that uses hooks. However,the documentation says: This project is not and will not…

  • TILT- Telemetry/Observability for FE and BE-part 27

    Now it is the case to monitor the calls how they arrive from Web ( frontend ) and continue to the backend. Fortunately,it is very simple in Application Insights There are 2 relevant links for Angular https://devblogs.microsoft.com/premier-developer/angular-how-to-add-application-insights-to-an-angular-spa/ https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript-angular-plugin https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript?tabs=snippet#enable-distributed-tracing The code is relative well written and appears ok. The fact that the AppInsights SDK is…

  • TILT-Count TILTS for each user-part 27

    I just wanted to know for each user how many tilts have each user/ url . As a Business Requirement,it is not a big deal. Let’s see what it means for a programmer . 1. Add functions to the backend to calculate the count 2. Add to the frontend call to the function 3. Figure…

  • TILT-Typed Reactive Forms and arrays–part 26

    I want now to pass to typed reactive forms ( with Angular 14 )- what is good is that are typed,i.e. I can see errors if some property is not correct. The code previously was profileForm = this.fb.group({ url: [”], publicTILTS: this.fb.array([]) }); Now the code looks like profileForm = new FormGroup({ url: new FormControl(”),…

  • TILT-Passing to IAsyncEnumerable instead of array–part 25

    When tansmitting an array of data to an application,usually the application transfers all data – or in chunks – if it is a large numbers ( page 1,page 2 and so on). Both are having drawbacks all data from start means that the time to see the data increases with the number of data paging…

  • TILT–Details for programmers- part 24

    I have organized the About in order to show more details. See https://tiltwebapp.azurewebsites.net/AngTilt/ Zero and the most important,the date when the CI was done First,Licences – .NET Core and Angular . Usefull to know. Second,Info about Versions – Repo and history – UI and JSON – mostly for making managers happy . Third,Automation – Swagger…

  • TILT- Docker with Ductus.FluentDocker–part 23

    I have already tests with Sqlite – however,it will be better to try tests with a real SqlServer . One of the way to have a sql server is to have docker – but how to start docker with sql server any time ? One of answers is Ductus.FluentDocker – https://www.nuget.org/packages/Ductus.FluentDocker – and this is…

  • TILT–Some improvements-part 23

    I wanted to have a share on TILTs,instead of a clipboard copy. Discovered that browser navigator has a native share – https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share . Implementation very simple ( not so good,) private share(str:string): boolean{ if (‘share’ in navigator) { navigator .share({ title: ‘TILT!’, text: str, url: environment.url + ‘AngTilt/tilt/public/’+this.profileForm.controls[‘url’].value }) .then(() => { console.log(‘Callback after sharing’);…