Microsoft Build op 23 en 24 mei 2023 - de samenvatting, deel 2

Ingediend door Dirk Hornstra op 17-jul-2023 22:13

Ik had een tijd geleden de samenvatting deel 1 gedeeld, het wordt nu tijd voor deel 2.

Het gaat hier om de sessies van 24 mei die ik nog niet gezien had.

Eerst naar de website en vervolgens de sessies opzoeken: build.microsoft.com

20:00 - 20:45 :: Developer joy with Scott Hanselman and friends
Kayla Cinnamon | Microsoft | Scott Hanselman | Microsoft

Video-link.

Scott is één van mijn helden, dus deze moest ik natuurlijk terug kijken. En dat is een goed plan, want het is een hele boeiende sessie!

Dev Home is een nieuw open-source product op Windows. Dev Drives, ook voor Windows Home. WinGet Configurations, configuratie van je machine.

Scott komt met de uitdrukking "shave the yak".
Kayla kent dit niet. We zien een animated gif van hoe het licht niet werkt, de lade piept, de smeerolie op is, de auto niet wil starten en de vrouw vraagt: "is het licht al gemaakt" en hij onder de auto ligt en zegt "je ziet toch waar ik mee bezig ben!". Zoals Scott zegt: het dagelijkse leven van een programmeur en het is waar. Je wilt X doen, maar daarbij kom je A, B, C en D tegen en blijft X de komende tijd nog even wachten....

We zien een grafiek met de Dev OOBE (out of box experience), waarbij je niet eerst de documentatie op sharepoint of in een Word-document hoeft te lezen, maar meteen kunt starten.
We gaan dit "echt" doen, dus Scott gaat in dienst bij Kayla. Hij krijgt een ingepakte surface, pakt deze uit, sluit hem aan op het grote scherm en vervolgens neemt Kayla de installatie over.

Scott laat ons de "inner loop" zien, tijdens ontwikkelen en de "outer loop", waarbij je zaken deelt met je collega's. In het volgende overzicht zien we onderdelen van de systemen, zoals Dev Home, Dev Drives, Terminal, Powertoys, WSL en ook WSA, het Window Subsystem for Android.

Met WinGet Yaml-bestanden kun je jouw favoriete applicaties die geïnstalleerd moeten worden instellen.

WinHome is open-source, dat kon doordat Terminal een succes was. 30% van de pull-requests voor Terminal komen uit de community.

In Dev Home kun je jouw Github-account koppelen, waarbij je ook de notificaties krijgt. Kayla geeft aan dat dit handig was voor haar team, want als een build / pipeline mislukte, kreeg je meteen een melding, kon je doorklikken en de build opnieuw uitvoeren.

Ook kun je daar een Dev Drive aanmaken. Deze stuurt je door naar Systeembeheer, daar zit nu een tab "for Developers" onder. Daar kun je een VHD aanmaken of een bestaande verkleinen/vergroten.

Ah, leuke tip! Ik zit nog wel eens in een command prompt en voer daar code . uit om die map te openen in Visual Studio Code. Scott noemt dat je met start . zorgt dat Windows Explorer in die map geopend wordt en het werkt!

Scott geeft aan dat hij zijn Terminal op maat gemaakt heeft en dat wil hij ook op de nieuwe machine.
Hiervoor komt Carlos Zamora op het podium, @cazamor, hij werkt in het Terminal team. Er is nu een portable versie van Terminal, hij start die versie op via een USB-stick. Zo kun je overal jouw versie draaien.

Hij komt met de aankondiging dat alle nieuwe zaken van Terminal ook in Windows 10 draaien ( backported ) en daar kan Terminal ook als de standaard console ingesteld worden.

Scott laat zijn terminal zien, waarin zijn bloedwaardes getoond worden. En de huidige branch van de repo waarin hij werkt.
En hij laat zien hoe een terminal eruit zou moeten zien, hij kiest voor retro en je krijgt spontaan een soort Matrix gevoel. Het is niet groen, maar oranje, maar de shaders e.d. zien er gelijksoortig uit. Het werkt met .hsls bestanden. En het is ingediend door iemand uit de community en het team zei: dit is vet, dit willen we erin! En zo zien we ook de variant "neonroad".

Het oudste wat Kayla kent is Pinball op Windows. Volgens Scott was dat op XP. Nu heeft iemand gedecompileerd en op Github gezet: https://github.com/k4zmu2a/SpaceCadetPinball?WT.mc_id=-blog-scottha

De wav- en mediabestanden zijn er niet. Maar die heeft Scott op een eigen XP cd staan...
Make en draaien! Zo draait hij deze nu als Linux app op zijn pc. Cool!

Ik hoorde Scott volgens mij zeggen dat dit nu in de preview-mode zit en dit in de herfst voor iedereen beschikbaar komt.

21:15 - 22:00
Next-Level DevSecOps: Secure Supply Chain Consumption Framework, Q&A
Adrian Diglio | Microsoft | Richard Diver | Microsoft | Mia Jewella Reyes | Microsoft | Jasmine Wang | Microsoft

Video-link.

De pagina voor dit Framework is hier te bekijken: link.

Een dame doet het intro. Het team richt zich op "secure by design, secure by default".

Adrian doet het intro. Hij noemt dat developers steeds meer open-source bronnen gebruiken in hun software. Hoe kunnen we dit veilig(er) maken?
Hij gaat eerst de mogelijke bedreigingen noemen en daarna hoe S2C2F hierbij kan helpen.
Zijn eerste sheet toont onderzoek van Synopsys uit 2021, waarin gesteld wordt dat 98% van de codebase open source code bevat.
En dat is waar, want alles wat wij met .NET doen: ook die basis van Microsoft is open source.
Hierna zien we een slide waarin wordt getoond hoe vaak open source aangevallen wordt.
Bron is SonaType die volgens Adrian elk jaar een State of the Software Supply Chain uitbrengt.
We zien in 2021 rond de 10.000, maar in 2022 tegen de 88.000 "malicious packages" die ontdekt zijn.
Een stijging van 742%. En dan heb je nog de packages die niet ontdekt zijn...

Aanvallers zijn "linksaf geslagen", ze richten zich nu op developers. Identiteiten en de systemen die gebruikt worden, zoals DevOps omgevingen en via open source proberen ze binnen te komen.

Adrian laat zien dat Microsoft zelf ook een grote gebruiker is van open source. 83.000 unieke open-source packages die meer dan 11 miljoen keer gebruikt wordt. Met zulke hoge getallen is dit team opgezet om te kijken hoe het gebruik van open source "veilig" gedaan kan worden (in 2019 gestart). Deelname aan OpenSSF, dit is een Linux organisatie. Het blog wat Adrian toont is hier te bekijken: link en daar zie je ook de link naar de Github-repo waar de code staat: link.

Het framework bevat instructies hoe je werkt met NPM, Nuget en andere bronnen. Volgens Adrian kan elke developer/organisatie hier zijn/haar voordeel mee doen.
Het gaat hier alleen om de consumptie van open source, niet voor het veilig aanbieden van open source zaken. Daar zijn andere producten voor zoals NIST, NSA ESF, SLSA, CIS.

Adrian laat zien hoe Microsoft zaken opgezet heeft. Ook geeft hij aan dat je zaken moet monitoren. Waarom zit iemand in jouw broncode te zoeken naar "secrets"? Als er een incident is, heb je protocollen beschikbaar om dat af te handelen? Secure Configuration, Security Monitoring, Incident Response, Business Continuity and Disaster Recovery (BCDR).

Jasmine vertelt wat meer over het Framework. We zien daar een aantal items. Mooi is dat ze daarbij ook zegt dat ze van "real world examples" zijn. Dat zien we in het volgende scherm. Bekende zaken (producten) die ik daar zie zijn phpMyAdmin (met opzet backdoors en zwakke plekken in de code), ESLint incident (iemand voegt "slechte code" toe aan een repo die bekend staat als "goed en vertrouwd"). En ook zie ik log4net staan, deze bereikt end-of-life/end-of-support, dus die wil je dan eigenlijk niet meer gebruiken. Met S2C2F kunnen voor al deze zaken acties uitgevoerd worden. Binnenkort maar eens uitzoeken hoe dat precies werkt.

Hierna krijgen we een overzicht van "maturity". Maak je gebruik van package managers. Scan je jouw oplossingen. Volgende level is dat je een incident response plan hebt, end of life zaken in de gaten houdt. Weer een level hoger is dat je malware defense en zero-day zaken kunt afvangen. Ze noemt hierbij ook dependabot!

Hierna komt de actiepagina, voor het doorlezen van de handleiding, mee doen aan openssf.org. En zorg dat jouw omgeving(en) meer mature worden.

Hierna volgt de Q and A. Zo zien we in de handleiding de tools die je kunt gebruiken. Volgende vraag is over "veel developers zijn bang om te updaten, pas als het niet anders kan, omdat ze bang zijn om iets kapot te maken". Adrian: een CVE moet binnen 3 dagen gefixt zijn. Patching faster should be a core mission of every software-development team.

Bij het antwoord op de volgende vraag laat Adrian zien hoe developers open source toevoegen aan hun projecten. En dat zijn heel-heel veel manieren. Via zip-bestanden, curl, wget, het package-bestand wordt in source-control ingelezen. De voorkeur van Adrian is de laatste: consumed through an artifact store.

Adrian laat een voorbeeld van een nuget.config zien.
Wat op zich goed lijkt, is volgens hem niet goed. Hij geeft aan dat je niet vanaf api.nuget.org (de live-omgeving) moet pullen. Als de aanbieder besluit om iets weg te halen, dan is het ook weg. Hij noemt het voorbeeld van "leftpad" (als ik het goed gehoord heb) in 2016, waardoor allemaal projecten niet meer wilden builden.

De eerste fix die hij geeft is "enforce it". Zorg dat er maar 1 bron is waar je nuget packages vandaan komen.
Niet in het voorbeeld 1 op nuget.org, andere op je eigen lokale schijf en de 3e via een andere URL. Break the build!

Het team van Adrian heeft een SBOM-tool gemaakt. Voor het gebruik (als consumer) zijn het veelal betaalde tools, Adrian noemt Daggerboard als een gratis alternatief: link.

Adrian legt uit wat SBOM is. Het is een bestand wat door machines gelezen kan worden en wat aangeeft welke open source gebruikt wordt in deze versie. Deze tools zoeken hier de zwaktes in.

Zeer interessante sessie en ik ben blij dat ik deze nog terug gekeken heb!

22:30 - 23:15
New developer experiences in Windows
Kayla Cinnamon | Microsoft | Sharla Soennichsen | Microsoft

Video-link.

De presentatie wordt door 2 dames gedaan, Kayla Cinnamon en Sharla Soennichsen, beide van Microsoft.

Kayla komt me bekend voor, dat komt omdat ze de sessie met Scott Hanselman deed.
We hebben al Powertoys, WSL, WinGet (die kende ik zelf nog niet) en Terminal (ken 'm wel, nog niet gebruikt).

Nieuwe zaken zijn niet altijd door teams bedacht, er zijn 100-en interviews met klanten geweest, MVP's doen hun zegje, en via Social Media en Feedback Hub komen ook verzoeken "van buiten" binnen bij Microsoft.

Als je een nieuwe machine hebt, ga je eerst de boel inrichten, de "onboarding". Maar daarna kom je in je normale workflow, code-compile-debug-commit en dat moet "soepel draaien". Volgens Kayla zijn hier de meeste performanceverbeteringen doorgevoerd; Daarna zien we ook nog even de "outer loop", dus je code gaat via CI/CD online, je collega's doe nog acties, etc. Met DevHome moet hier meer uit te halen zijn.

We krijgen een promofilmpje te zien.
Al je development start straks vanuit "Dev Home".
Beschikbaar op Github en in de Microsoft Store.

Hierna volgt een demo van Dev Home, wat we ook al een beetje zagen bij de sessie met Scott.
Er zijn nu widgets, die je ook in Windows 11 hebt - hier nog eens naar kijken?
Zo voegt Kayla een blokje toe voor "openstaande pull-requests".
Ook een handige plugin voor een SSH-connectie.

Er komt ook een plug-in aan voor Azure DevOps.

Hierna komt Sharla. Zij spreekt over Dev Drive.
Deze zijn "trusted", dus Defender gaat er makkelijker mee om.
Als je een VHD maakt, dan groeit deze naar behoeven, dus maak je een 50 GB, maar staat er maar 2 GB op, dan is het bestand maar 2 GB.
Sharla gaat door de flow van End-to-end setup heen.
Eerst de repo kiezen, bestemming de nieuwe dev drive. Vervolgens kun je applicaties installeren, zoals Visual Studio Code, SQL Server Management studio, etc.

WinGet kan nu ook configuratie aanpassen.

Kayla komt weer aan het woord. Ze laat Copilot zien.
In WinDbg wordt nu ook al AI toegevoegd, dat kan wel eens een hele mooie toevoeging zijn!
Je kunt daar memory-dumps debuggen, maar hoe het allemaal werkt en wat je ermee kunt: moeilijk, moeilijk.

Kayla laat zien welke updates bij Terminal doorgevoerd zijn.
Je kunt Terminal op Windows 11 als "standaard console" instellen, bij Windows 10 kan dat nu ook.
De nieuwe versie, 1.18 bevat de mogelijkheid om "tabs eruit te trekken en terug te zetten", processen in die tab lopen gewoon door. Een portable mode, je kunt een terminal met jouw instellingen op een USB-stick mee nemen. En je kunt in je instellingen met de ENVIRONMENT variabelen werken.

In WSL zijn wat zaken toegevoegd. Systemd, waarmee je kubernetes containers kunt draaien en meer.
En met wsl --update gaat de update nu via de Store in plaats van via een Windows Update (boel is los getrokken).

Kayla gaat door met Dev Home. Ze gaat een bestand aanpassen. Ze dubbelklikt op een bestand en maakt daarbij gebruik van Powertoys Tweak: zonder het bestand in een editor te openen kun je deze snel bekijken.

Vervolgens laat ze zien hoe ze links Visual Studio Code draait en in het rechterdeel een stuk van het dashboard van Dev Home getoond wordt (zodat ze kan monitoren of er pull requests open staan). Dat doet ze met Powertoys Fancy Zones.

Kayla laat hier de notificaties zien (wat we bij de sessie met Scott ook al zagen), zodat je meteen geinformeerd wordt als een build faalt. Niet via mail, maar direct in je scherm.

Kayla laat nog even de nieuwe PowerToys zien. We zagen hier al wat zaken, maar ook is er nu "paste as plain text", "registry file previewer", "hosts file editor" en meer. Ze laat nog ééntje zien:
Mouse without borders. Hiermee kun je op 2 machines met 1 muis werken :D

Hierna komt Sharla weer. PowerShell geeft je tips wat je kunt installeren als er wat mist.
In september kun je in je explorer niet alleen .ZIP, maar ook .7Z, .TAR, .RAR uitpakken/bekijken.
In 2024 kun je ook .TAR en .RAR maken (nu kun je alleen nog maar kiezen voor: inpakken als .ZIP).

Je kunt de klok nu ook verbergen. En je kunt ook zorgen dat taak-knoppen NOOIT gecombineerd worden. Erg fijn!
En je kunt nu ook via de taakbalk, rechtermuisknop in het pop-up scherm kiezen voor "End Task". Geen gedoe via TaskManager.

Sharla laat nog wat slides zien. Azure DevOps wat er nog bij gaat komen. Meer dashboards toevoegen. Nog een betere koppeling met repositories. En er wordt gekeken of er een integratie met gaming development verbeterd kan worden. Samen met het XBOX team komt er een Gaming Development Kit om spellen te kunnen maken. Via WinGet te krijgen!

En we krijgen nog wat linkjes:

Hierna volgens nog een aantal vragen en is de sessie afgelopen.

23:45 - 00:30
Kickstart your .NET modernization journey with the RWA pattern
Nish Anil | Microsoft | Matt Soucoup | Microsoft

Videolink.

RWA staat voor Reliable Web App en "patterns" kunnen je helpen om je apps naar de cloud te verplaatsen. Hier ben ik wel benieuwd naar, want bij het "veilig bouwen van apps" werd volgens mij ooit ook al gezegd dat je moet bouwen "alsof je app in de cloud gaat draaien". Ik vermoed dat als je zaken als "viewstate" en "sessies" in je code gebruikt, je app ongeschikt is om in de cloud te draaien. Maar eens horen wat Nish en Matt te melden hebben.

De patterns zijn gebaseerd op reliability, security, cost optimization, operational excellence en performance efficiency.

De patterns zijn uitgewerkt op basis van echte cases. In deze presentatie wordt een fictief bedrijf met bepaalde problemen gebruikt om de patterns te tonen.

Nish laat een slide zien, waarbij je kunt zien dat er een aantal principes gelden;
Cost profiles, Observability with SLO Measures, CI/CD with dev, prod configurations, Azure Dev CLI, .NET e de well-architected and 12 Factor Apps.

In het rechter deel zien we de features, Reliable Service Communication, Cache-aside, Managed identity, Multi-region, WAF, Private endpoints, Managed Secrets, Central configuration, Immutable infrastructure, Resoure tagging, Logging / montoring en 99.9% SLO

We gaan naar de demo. De code hiervoor staat op Github:
https://github.com/Azure/reliable-web-app-pattern-dotnet

Infastructuur-bestanden met .bicep, video's.
We zien hoe het project qua architectuur in elkaar steekt. Het ziet er netjes uit, maar je denkt ook meteen: dit kost wel flink wat geld!

Om de boel een hoge SLA te geven is het project multi-region. Daar dus nog een keer deze implementatie!

Reliability:

  • Resilient: herstel van fouten en draai daarna weer normaal door;
  • Availability: kunnen gebruikers bij hun "workload"?
  • Distributed apps: ga uit van onbetrouwbare communicatie, met distributed workloads kun je apps betrouwbaarder maken

Ontwerp je applicatie voor fouten. Een heel andere flow dan als je nu een applicate bouwt, want vaak wordt daarin de "happy flow" gevolgd en "wat kan hier nu mis gaan?". Nou, in de cloud kan er heel veel mis gaan.

  • Retry pattern
  • Circuit breaker

Nish noemt het voorbeeld van je winkelwagen, waarbij je jouw kortingscode wilt verzilveren, maar die service is even niet bereikbaar. Wat doe je? "Sorry, geen korting". Of is je insteek: ligt die dienst er uit, dan krijgt de persoon standaard 10% korting.

De mannen noemen dat je Polly kunt gebruiken, maar we zien in de C# code dat er nu ook al in de opties voor SQL Server een retry-mogelijkheid zit en ook in de AzureAppConfiguration.
We zien in de demo hoe eerst zonder de retry elke 2e aanroep van de pagina het resultaat: "er zijn geen concerten" teruggegeven wordt. Na het toevoegen van de Retry-policy, die het 3x probeert zien we die melding niet meer. Het terug geven van het resultaat kan iets langer duren, maar dat is het dan wel.
Dat geeft je wel te denken: eigenlijk zou je "de pagina" al willen laten zien en de rest die mogelijk langer op zich kan laten wachten later inladen.

We gaan door naar de volgende "pijler": security.
Confidentiality, Integrity en Availability.
De basis hiervoor is:

  • Managed Identity: veilige connectie tussen Azure resources zonder een connectiestring of wachtwoorden;
  • Identity-based authentication: geef diensten toegang op basis van identiteit. Vervolg op managed identity.
  • Secret management: gebruik Azure Key Fault, identity-gebaseerde referenties om "secrets" op te halen
  • Endpoint security: regels op het netwerkverkeer, blokkeer publiekelijk internetverkeer naar bepaalde services

 

Hierna "cost optimization". We zien weer het schema met alle diensten waarbij mijn eerste gedachte was: dit kost flink wat geld! En dat was ook Matt zijn eerste gedachte. Hij noemt de volgende zaken:

  • Choose the correct resources (laat je een VM 24/7 draaien, of kun je het met losse containers)?
  • Optimize workloads, aim for scalable costs
  • Dynamically allocate and deallocate resources

Balance business goals with budget
Reduce unnecessary expenses and improve operational efficiencies

We zien hoe de SLA's vermenigvuldigd onder de gewenste SLO uit komen. Dat is te fixen door 2 regio's te gebruiken, daardoor werkt de formule (1 - (1 - N) ^ R).

We zien vervolgens een .bicep script om een omgeving op te zetten.
Daar filteren we op de parameter "isProduction" om voor dev een goedkopere omgeving op te spinnen (16% goedkoper).

Het volgende punt is Operational excellence.

  • Repeatable infrastructure
  • Rotating secrets
  • Monitoring

Processes that keep an aplication running in production
Automated deployments - predictable, reliable, avoid human error

Het punt "rotating secrets" heb ik wel eerder gezien. Als je voor bepaalde connecties altijd hetzelfde secret gebruikt is er een kans dat deze uitlekt of dat deze met brute force acties geraden kan worden. Als er een code gelekt is moet deze vervangen worden én je wilt graag dat codes automatisch zo nu en dan vervangen worden.

Bij het punt "repeatable infrastructure" noemt Nish dat Matt al een bicep-template liet zien, maar dat je daardoor dus ook ARM en TerraForm voor kunt gebruiken.

We gaan naar het laatste punt, Performance efficiency.

  • Performance optimization pattern
  • Improve consistency and maintain consistency
  • Manage costs

Cache-aside pattern: met Azure Redis cache voor Azure SQL kun je een stuk netwerkverkeer voorkomen.

We duiken de code weer in. Vraag is waar de "cache" vandaan komt. Volgens Nish uit het nuget-package StackExchange.Redis.

We zijn aan het einde van de sessie gekomen.
Daarbij wordt nog een slide getoond met alle kanalen waarop je .NET kunt volgen:


En take the next step: aka.ms/LearnAtBuild


Vooraf opgenomen sessies:

Accelerate your application development with a flexible toolkit of UI controls
See how using pre-built, reusable UI components can speed up development time on your next .NET application.

Videolink.

De presentator van deze presentatie is Greg Lutz van Grapecity, deze opname duurt 21 minuten.

Hij werkt bij GrapeCity en is al 10 jaar bezig met ComponentOne controls, controls voor .NET.
Hij gebruikt WinUI 3. Maar wat is dat precies? We krijgen een stukje historie.

Je had eerst WinForms, WPF (Windows Presentation Foundation), WinRT (windows 8?), UWP (WinUI 2) en WinUI (eigenlijk WinUI 3).
Dat zijn allemaal UI frameworks voor de desktop. Voordeel van WinUI (Windows 10 en hoger) is dat het ook op de XBox werkt, IOT devices.

Greg heeft een "simpele" mailclient gemaakt, "OutlookDemo" en hoewel de boel heel basic is, vind ik het er best clean uitzien!

Het is een .NET 6 project, gericht op Windows 10. Volgt het MVVM-model. Ik zie veel .xaml-bestanden.
In het ViewModel heeft hij een aantal ObservableCollections, die ervoor zorgen dat bij wijzigingen dat automatisch in het View deel doorgevoerd wordt.

Omdat veel zaken open-source geworden zijn, zijn ook bepaalde componenten open source. De Datagrid moet je zelf nog binnen halen. Dat kan die de Windows Community toolkit. Als ik daar op zoek, kom ik uit op deze github-locatie.
Maar daar wordt verwezen naar de nieuwe github-locatie en een blogpost daarover met uitleg waarom dit op een nieuwe locatie opgezet is: link. Het lijkt erop dat je het beste de laatste github-locatie kunt gebruiken.

Greg laat zien dat je ook via de Store een app kunt installeren, Windows Community Toolkit Sample App, waarin je kunt zien welke controls er zijn en hoe ze eruit zien.

Via nuget voegt Greg de C1.WinUI.Grid toe aan zijn project. Hij vervangt de DataGrid met en FlexGrid van C1.
Die is een stuk sneller, kan direct sorteren op een kolom.
Hierna voegt hij een tekstveld toe en met een i:Interaction.Behaviour kan hij dat veld koppelen met grid:FullTextFilterBehaviour FilterEntry="{Binding ElementName=txtSearch}". App opstarten en door tekst in te voeren wordt meteen gefilterd en de match wordt ook meteen als vette tekst getoond.

Het volgende voorbeeld van Greg is groeperen van data. Bij de standaard datagrid kan dat maar op 1 level. Bij de FlexGrid kan dit met meer. Hij groepeert eerst op datum, daarna op de afzender.

De laatste feature die hij laat zien is de details tonen van een e-mail in een regel in de FlexGrid.

Dus mocht je niet tevreden zijn met de controls die .NET je standaard biedt en het niet allemaal zelf willen bouwen, dan kan ComponentOne een oplossing voor je zijn: link naar de website.

How to Create a PDF Document in Blazor Using the .NET PDF Library
PDFs are an ideal format for sharing and archiving documents, but creating a viewer from scratch requires a deep understanding of PDF specifications and programming languages. What benefit does a PDF viewer provide for your business? It makes it easy to send a report to stakeholders, send an invoice to a customer, or generate a receipt in a retail shop. In this demo, we’ll show how you can easily add a PDF viewer to your app with text, images, and a table in the PDF document.

Videolink.

Ik moet nog steeds mijn eerste Blazor-applicatie bouwen. Mijn ervaring met het bouwen van PDF's is op basis van ASP.PDF en andere tools.

Deze presentatie wordt gegeven door Carter Harris.

De titel op de eerste slide luidt: "hoe een PDF in Blazor maken met de Syncfusion PDF library".
Even zoeken en dan kom ik uit op de site van SyncFusion: link.

Zo te zien is het een commercieel product, ik had gehoopt op iets wat al "standaard" in het framework zat of door Microsoft aangeboden zou worden. Daarom ga ik deze sessie niet bekijken. Mocht jij wel interesse hebben, dan kun je hier boven de Videolink aanklikken.
De vorige sessie van Greg van Grapecity ging ook over een commercieel product, maar in die sessie zag ik standaard XAML, uitleg over het ontstaan en heb ik de github-linkjes van de openbare repo's van Microsoft, ik vermoed dat deze sessie mij niet zulke toegevoegde waarde gaat geven.

Microsoft Edge: State of web developer tools
We introduce you to new Microsoft Edge features, JSON Viewer and Focus Mode, and explore new Edge DevTools. We also demo enhanced traces, a powerful leap forward in debugging and collaboration on the web by leveraging sourcemaps and Azure DevOps Symbol Server. Finally, we discuss common anti-patterns that negatively impact performance and how to fix them.
Rob Paveza | Microsoft

Videolink.

Sprekers zijn Zoher Ghadyali van Microsoft en Rob Paveza, ook van Microsoft. Meestal zit je in Google Chrome in de dev-tools te werken (console, netwerk), maar recent zat ik in Edge en kon daar in javascript een breakpoint instellen. Misschien kon dit al, ik had het nog niet eerder gedaan. Eens horen of er bij deze sessie meer zaken naar voren komen die ik nog niet wist;

Zoher start, eerst gaan we kijken naar de JSON Viewer, samenvatting van de DEV Tools en de Focus Mode.

JSON Viewer is nog experimenteel.
Ga in je browser naar edge://flags zoek op JSON Viewer en zet deze op "enabled".
Als je daarna een JSON-feed in je browser opent (of JSON bestand) wordt deze getoond als JSON. Met het radertje en vinkje bij "Code folding" kun je nog zaken inklappen.

In de dev-tools zijn nu 33 tools beschikbaar.
Omdat dit nogal "veel" kan zijn, je soms zaken niet kunt vinden of niet weet waar te beginnen, is Focus Mode toegevoegd. Daarbij worden een aantal zaken verborgen en hou je dus "focus".

Hierna gaan we naar het volgende deel, het verbeteren van de performance. Verbeterde debugging, uitgebreide traces. Het optimaliseren van CSS met Selector Stats.
Zoher noemt dat 40% van de mensen een website verlaat als het langer dan 3 seconden duurt deze te laden.
Zoher laat zien dat je bij Performance data van een eerdere export kunt importeren. Maar als de javascripts veranderd zijn, hoe kun je zaken nog vergelijken?

Bij de import van een bestaande dump kun je nog steeds de .json-bestanden importeren, maar je hebt nu ook .devtool dumps. En die bevatten "alle" data. Ik vermoed dat het net als .docx, .xslx een ZIP-bestand is waar alle data in zit. Want Zoher laat zien dat je alle javascript-bestanden die "toen bij de opname" opgevraagd werden beschikbaar hebt. Als ook de berichten in de console. Perfecte manier om aan een collega te laten zien: dit is de foutmelding in de console en je kunt zien welke netwerk-requests en javascripts ingeladen worden. En hoef je niet een heel stappenplan uit te werken om je collega "tot die stap" te laten komen.

Via Settings en daar het blok Persistence zet je een vinkje bij "export enhanced performance and memory traces".
Daar kun je ook aanvinken dat de console messages, script sources en DOM snapshots meegenomen moeten worden.

We gaan door met de Selector Stats. Er is "iets veranderd" en daardoor wordt je CSS opnieuw doorgerekend. Maar wat gebeurt er allemaal? Je zit op het tabblad Performance, zet een vinkje bij Enable advanced rendering instrumentation (slow). In de tijdlijn zijn de blokken waarin "rendering" uitgevoerd wordt altijd paars. Dus die zoeken we op. Zoher klikt 1 aan en dan kunnen we meer informatie zien. In de summary zie je de totale tijd die nodig was. Als je op tabblad Selector Stats klikt, kun je zien hoeveel milliseconden elke stap nodig had om de style te bepalen. Daaronder zie ik Total blocking time: 2211.94 ms (estimated) staan, dus 2.2 seconden om de boel te tonen. Dat klinkt "traag".

Door in de kolom Elapsed te sorteren op de items die het langst duren, daar kun je winst op behalen.

We gaan door. Volgende punt is unminification with sourcemaps en anti-patterns die negatieve impact op de performance hebben.

Met sourcemaps kun je aangeven hoe de minified code zich verhoudt tot de originele code. Je kunt maps meesturen, op de live-omgeving zetten, advies van Rob is om het via Azure Artifacts symbol server te doen, in verband met security en privacy.

Rob laat het verschil zien tussen een profile-record met en zonder sourcemaps. Zonder sourcemaps krijg je functies "m" en "E", terwijl je in de stacktrace met sourcemaps wel de originele namen te zien krijgt. Ook in het tabblad "Memory" krijg je nu meer relevante informatie te zien. En we krijgen ook nog te zien wat DevTools er zelf mee doet. Dus als we een breakpoint op een functie hebben, zien we in het rechterdeel de type-scriptbestanden waar de code origineel in staat en op welke regel. Het lijkt erop dat we nu ook "client-side" veel meer kunnen doen!

Rob komt vervolgens nog met de Crash Analyzer. Wat ook een experiment is. Wil je hiermee gaan "pielen", open in devtools de settings, experiment en zet een vinkje bij Crash Analyzer experiments.

We gaan nog naar de anti-patterns. Dit zijn zaken die Microsoft tegengekomen zijn:
* Iets waar Microsoft zelf verrast over was, was dat SVG animaties soms flink geheugen/performance intensief zijn. Een beter alternatief zijn dan CSS animaties.
* Er zijn events die "reflow" genereren, waarbij de browser met CSS moet bepalen of zaken anders (of niet meer, of juist wel) getoond moeten worden: die processen zijn intensief, even geen user-input, dus moet je zoveel mogelijk voorkomen. Tip van Rob is om transform en opacity te gebruiken, dat zijn goede alternatieven.
* De DOM size. Als je veel zaken inlaadt, dat is natuurlijk intensief. Rob noemt React, technieken als React Fragments wat goed werkt. Een andere techniek is "shadow DOM". Wijzigingen hierin zijn beperkt, het raakt niet de andere items er omheen.
* En als laatste noemt Rob CSS-in-JS. Wat op zich wel logisch is. Als je met javascript CSS gaat aanpassen, dan triggert dat weer andere zaken. Rob noemt het "poor performance". Tip van Rob is om die dingen in een eigen stylesheet te zetten en dat via javascript te laden.

Rob sluit af en deelt daarbij de link aka.ms/build-2023-devtools waar je deze informatie kunt nalezen, maar ook gerelateerde documentatie e.d. Even checken dus!

Unleash your Outlook Add-ins experiences into the new Outlook
A new Outlook is coming and will only support Web Add-ins. In this session, learn all you need to know about what the new Outlook means for Outlook Add-in developers as well as about our backlog and new features for Outlook Web Add-in developers!
Profile picture of Juan Balmori
Juan Balmori | Microsoft

Videolink.

Presentator is Juan Balmori Labra, hij is Principal Program Manger - Outlook Extensibility

Ik ben niet een add-in ontwikkelaar voor Outlook. Hoewel ik een tijdje geleden nog wel even heb gekeken of ik daar wat mee kon. Bij mijn huidige werkgever draait namelijk elke dag een taak die wat bestanden op je schijf zet en daarmee zorgt dat je handtekening binnen Outlook "altijd" goed staat. Dus je naam, functie, telefoonnummer (indien van toepassing). Dat werkte al niet op Mac OS (daar heb je 1 of ander binair bestand waar de configuratie in staat) en bij de overgang naar Office 365 al helemaal niet meer. Misschien dat ik wat van deze sessie kan leren.

Ondertitel van deze sessie is dat Outlook alleen nog maar Web Add-ins gaat ondersteunen.

Een nieuwe Outlook. Klanten willen dat ie overal hetzelfde eruit ziet. Maar we krijgen ook een "centrale code-base" voor alle Outlooks. Windows-, Mac- en web-versie. Rechtsboven zet het schuifje op new Outlook.

COM en VSTO (Visual Studio Tools for Office) worden niet meer ondersteund.
Het team van Juan is natuurlijk druk bezig om dat gat te dichten. De issue-lijst kun je hier bekijken: link.

Kijk, daar zie ik op regel 4: "Online signatures". Automatically add corporate themed and consistent e-mail signatures into e-mails met "supported". Dat punt moet ik zelf binnenkort even gaan uitzoeken!

Mailbox 1.13 wordt binnenkort live gezet. We krijgen een demo van Juan.
Corey Tinianov van harmon.ie laat de demo zien.
Ze hebben ongeveer 500.000 klanten die nu nog gebruik maken van de COM architectuur en deze moeten binnenkort dus over.

Met Send Later API je kunt "nu" je mail versturen, maar zorgen dat ie morgen bij je klant om "8.00 uur" binnen komt. Een server-side delay. En handig als je klant in een andere tijdzone zit (want wie wil om 2.00 uur een e-mail ontvangen?).

Shared Mailboxes worden ondersteund. Via <SupportSharedFolders>true kun je dat accorderen.
Een PrependOnSend API - als er inhoud bij versturen toegevoegd moet worden (bijvoorbeeld <b>VERTROUWELIJK!</b>).

Sensitivity Labels API, hiermee kun je een label hangen aan een mail, personal, public, general, confidential (all employees of anyone (not protected)) of highly confidential. Via deze link kun je hier meer over lezen.

Szymon Szczesniak van CodeTwo laat zien hoe zij het nieuwe product gebruiken.
Hun product zorgt dat handtekeningen in Outlook goed geplaatst worden.
Inmiddels 100.000 gebruikers, 1 biljoen handtekeningen.

Szymon laat zien hoe het werkt. Hij maakt een nieuw e-mail. Daarbij wordt het event OnNewMessageCompose aangeroepen en dat "injecteert" de handtekening, via de signature API.
Hij laat zien dat je daarbij ook nog eens kunt kiezen voor de internal signature (die standaard geplaatst wordt), maar ook voor de full signature en simple signature.

Je hebt nog een event, OnMessageRecipientsChanged.
Als je iemand "buiten" de organisatie in de To zet, triggert deze functie en krijg je de full signature!

Szymon laat ook zien dat het event, OnMessageFromChanged kan zorgen voor nog een andere handtekening (afzender wordt nu ineens het team waar je in zit).

Als afsluiter deelt Juan nog even een aantal linkjes:


Quick Starts was geen URL, dus even gezocht en daarbij kom ik hier op uit: link.