Microsoft Build op 23 en 24 mei 2023 - extra sessies - de samenvatting, deel 3

Ingediend door Dirk Hornstra op 24-jul-2023 19:33

Ik heb al 2 samenvattingen gedeeld, deel 1 en deel 2, maar ik kom hier nog met een toevoeging. Wat ik daar gedeeld heb, dat is een selectie van presentaties die ik wilde zien / later terug wilde zien. Maar Microsoft heeft meerdere sessies rond dezelfde tijd en dat betekent dat je dus andere presentaties "skipt", omdat je al een andere presentatie bekijkt. Maar... als je dan later de sessies online bekijkt, dan kun je ook die presentaties nog bekijken. En zo kwam ik een aantal tegen waarvan ik dacht: die zou ik eigenlijk ook nog wel willen zien, want het onderwerp is interessant! Of de spreker vind ik goed, dus de presentatie zal ook wel interessant zijn.

Timo-samenvatting

De samenvatting van dit blog zou zijn "Android in Windows, maak je Windows Terminal op maat, zet progressive apps in je sidebar van Edge en maak een geweldige APP met .NET 8 en Blazor!", maar dat valt toch een beetje tegen. Doorklikken op de linkjes hieronder is voldoende.

Want Android in Windows lijkt nog in preview fase te zijn: link, de sessie over de Windows Terminal is niet online te bekijken, de serie over Blazor kwam me bekend voor en de sidebar van Edge, dat is op zich wel een goede om PWA sites te maken.

De samenvattingen heb ik hieronder daarom beknopt gehouden. Om dit artikel toch wat inhoud te geven, neem ik nog even door wat bij de sessie van Kayla en Sharla voorbij kwam, allemaal linkjes om software te installeren. En dat heb ik gedaan. Die kun je hieronder vinden onder het kopje: JUST DO IT: SESSIE KAYLA EN SHARLA.

Windows Subsystem for Android: Opportunities for mobile developers.
With the release of the Windows Subsystem for Android™️, Amazon Appstore games and apps now have the ability to reach hundreds of millions of Windows 11 users. In this session, Microsoft and Amazon Appstore product leaders discuss the opportunity this presents to expand the customers for your mobile Android games and apps.

Presentatoren zijn Raman Kohli, Zarana Kiran Desai en Jon Kirk.

Videolink.

Nog niet gebruikt, maar binnenkort wel mee van start. Want WSL in Windows gebruik ik regelmatig. En dit lijkt me ook best cool!

We krijgen eerst te horen wat de visie van Microsoft is. Windows 11 is in 2021 uitgebracht. En eigenlijk begin ik het "nu echt" te gebruiken. Samen met Amazon is de appstore voor Android gemaakt. Amazon was voornamelijk voor hardware gebaseerd op Android. Maar nu komt het dus ook beschikbaar in Windows.
Als Zarana het woord krijgt, dan zien we een kort filmpje waarin we "Kindle" zien en spellen die in beeld komen. Net alsof het een "gewone" Windows-game is. Zarana verwijst ook nog even naar de Github-locatie voor WSA. Jon Kirk is van Amazon en kondigt aan dat de komende tijd er een nieuwe input SDK aankomt. Jon verwijst de developers door naar de developer portal van Amazon.

Ik had gehoopt iets meer info over WSA te krijgen, die 2 linkjes zijn eigenlijk het enige wat je nodig hebt, deze video kun je dus verder wel overslaan.


Customize your Windows Terminal
Customizing the Windows Terminal can help developers and IT professionals be more productive by enabling them to personalize their command-line experience. In this session, learn how to customize the Windows Terminal to meet their specific needs and preferences. The session covers a range of customization options, including how to create custom themes, set up different profiles for different use cases, and use the powerful features of the Windows Terminal, such as tabs and panes.

Presentatoren zijn Kayla Cinnamon en Christopher Nguyen.

Pagina-link.

Ik heb Windows Terminal gezien tijdens een vorige Build en heb 'm nog steeds niet geïnstalleerd, daar wordt het nu wel tijd voor. De oplettende lezer ziet dat dit de derde sessie van Kayla is die ik hier samenvat en ik moet toegeven, ik ben wel een beetje verliefd op deze leuke dame van Microsoft. Dat is niet de enige reden dat ik deze sessie bekijk, het onderwerp is interessant en zoals ik in de vorige sessies al kan zien, ze is een zelfverzekerde presentator die weet waar ze het over heeft en perfect kan presenteren.

Update: ai... niet goed gekeken. Dit was een "in-person" event en het is ook niet opgenomen. Dus dat wordt zelf nog maar eens gaan uitzoeken ( en dan ga ik het hier delen via een eigen blog ).


Microsoft Edge: Building Progressive Web Apps for the sidebar
The sidebar in Microsoft Edge enables multi-tasking alongside browser tabs, popularized by the new Bing chat, compose, and image creator experiences. In this talk, we cover best practices for developing Progressive Web Apps (PWAs) for the sidebar that can grow your app's reach with minimal effort.

Presentator is Sohum Chatterjee van Microsoft

Videolink.

Zou Edge nu toch mijn favoriete webbrowser worden? In mijn samenvatting, deel 2 heb ik de presentatie over de dev-tools behandeld en daarin kwam naar voren dat er flink gewerkt is door Microsoft.

Ik zag iets van "build apps voor de Sidebar" en ik dacht even dat we dit in Windows zouden gaan doen. Net zoals je vroeger (in Vista?) die gadgets in je sidebar had, zoals de klok en de RSS-items. Maar dit gaat dus over de sidebar in Edge, je browser.
Het gaat hier met name over PWA, progressive web-apps, die op je desktop, mobiel en andere omgevingen kunnen draaien. Sohum verwijst naar aka.ms/pwa

Het mantra is: "build once using web standards that are implemented cross-browser and cross-platform" en "have your web app adapt to a different variety of devices and contexts by making simple code enhancements". Sohum laat het voorbeeld zien van Bing chat, je ziet het icoon en als je erop klikt blijft je browserscherm actief, er komt een extra kolom tussen waar je kunt chatten met Bing Chat.

Hierna gaan we naar een demo: "how to build a sidebar app".
* stap 1: configureer je web app manifest bestand (dat is een bestand met JSON).
Je bent hiermee niet verplicht om de site/app volledig los te laten draaien, als je jouw PWA alleen in de sidebar wilt hebben zet je de property "display" op "browser".
* stap 2: voeg de property "edge_site_panel" toe aan je manifest bestand.
 Door dat te doen "snapt" Edge dat je het in de sidebar wilt gebruiken en gaat dan die andere eigenschappen gebruiken, zoals name, short_name, description, icons en categories.
* stap 3: zorg dat je een resolutie van 376 pixels als minimum ondersteunt en zorg dat je interface responsive is.
Als je problemen hebt met die breedte, kun  je binnen "edge_site_panel" een  property "preferred_width" toevoegen, bijvoorbeeld met waarde 460. Maar jou het zo smal mogelijk!
* stap 4: de sidebar app ontvangt de user-agent waardoor je kunt afvangen dat je niet binnen Edge zit:



const brands = navigator.userAgentData.brands;
const sidebarBrandInfo = brands.find(b => b.brand === "Edge Side Panel");
if (sidebarBrandInfo) {
  console.log(sidebarBrandInfo); // {brand: "Edge Side Panel", "version 1"}
}
else {
  console.log("App is not running in Edge sidebar");
}
 

Hierna komt David Ossim in beeld, werkt bij Meta (moederbedrijf van Facebook en Instagram).
Hij laat zien hoe Instagram "binnen je Edge sidebar" als icoon komt te staan. En ook kan laten zien "dat er een update is". Ook zien we dat verwezen wordt naar https://www.instagram.com/data/manifest.json de locatie waar het manifest staat.

Er wordt gewerkt om PWA nog beter te maken. Zo zien we dat er gewerkt wordt aan "shortcuts", bij Office365 een pop-up voor het aanmaken van een nieuw document, nieuwe spreadsheet of nieuwe presentatie.
Een start_url eigenschap om de gebruikt een "custom landing-page" te geven.

Sohum heeft het erover dat gekeken wordt of zaken met andere browser-leveranciers als standaard gemaakt kunnen worden.
We zien hierbij ook nog een deel van Github, waar je feedback kunt geven: aka.ms/sidebarexplainer

Wil je starten? Check dan de documenten en voorbeelden: aka.ms/sidebardocs

 

Full stack web in .NET 8 with Blazor
Learn how ASP.NET Blazor in .NET 8 allows you to use a single powerful component model to handle all of your web UI needs, including server-side rendering, client-side rendering, streaming rendering, progressive enhancement, and much more!

Presentator is Daniel Roth, net als Scott Hanselman en Scott Guthrie 1 van mijn helden van Microsoft!

Videolink.

Blazor is een coole techniek, ik heb er sessies over gezien, live gevolgd, maar zelf nog niets mee gedaan. Is dit de sessie die ervoor gaat zorgen dat ik er nu zelf wat mee ga doen?

Daniel laat een receptensite zien. We zien daar in blokken verschillende recepten.
Vervolgens laat hij zien wat er geladen wordt. Dat is geen web-assembly, geen web-socket en ook geen javascript.
Het wordt allemaal server-side gerenderd.

We zien daardoor wel dat als we bijvoorbeeld een recensie toevoegen, we weer boven in het scherm zitten, omdat er een volledige post gedaan wordt.
Hetzelfde geldt voor de data, soms zie je wat "flikkeren" omdat zaken later ingeladen worden.

Daniel voegt een vertraging toe "alsof data uit een database wordt geladen". Met .NET 8 kun je "streaming rendering" uitvoeren en dat maakt het een stuk beter.
Hij voegt hiervoor in Index.razor het attribuut @attribute [StreamRendering(true)] toe.

De pagina om zelf een recept toe te voegen is interactief, dus die moet niet via server-side rendering.
De component welke Daniel daarin heeft, <IngredientsListEditor, daar voegt hij het attribuut rendermode="" aan toe.
En dan kun je meerdere opties kiezen, @WebComponentRenderMode.Server of .WebAssembly.

Daniel kan nu ingrediënten toevoegen, verplaatsen, etc.
Maar hij wil dat de hele pagina zaken interactief wordt.
Dus hij voeg in SubmitRecipe.razor bovenin het attribute @attribute [ComponentRenderMode(WebComponentRenderMode.Server)] toe waardoor het voor de hele pagina geldt.

Dan komt Daniel nog met het punt dat je mogelijk wilt dat bij het eerste bezoek de boel via de Server gerenderd wordt. Dan kan de web-assembly gedownload worden en de volgende keer het via de WebAssembly uitgevoerd worden.
De configuratie is dan via WebComponentRenderMode.Auto
We zien dat de eerste keer geen webassembly of web-socket gebruikt wordt. De volgende keer wel de web-socket.
En de keer daarop de webassembly, dat is ook een bestand van 8MB, dus bij tragere verbindingen duurt die download een tijdje.

Volgens Daniel is er nog veel meer, hij geeft het advies om .NET 8 te downloaden en ermee aan de slag te gaan.

 

JUST DO IT: SESSIE KAYLA EN SHARLA

Ik had via iBood een laptop gekocht, omdat als ik iemand met pc-problemen help, ik altijd een eigen laptop mee neem. De laptop die ik had was niet zo snel meer, dus prima. Maar nu kon ik ook via mijn werk mijn "oude laptop" voor een schappelijke prijs overnemen. Financieel afgeschreven, maar nog prima te gebruiken.

Voordeel is dat ik nu die laptop "rustig" kan inrichten, voor zaken waar ik iets mee moet doen, daar kan ik mijn iBood-laptop wel voor gebruiken. Dus mocht je developer zijn, hierbij even de stappen die ik gevolgd heb;

Ik heb recent geblogd over Microsoft Build. En daar kwamen een aantal tools die er al waren ter sprake en ook nieuwe tools. Die ga ik eerst maar eens installeren;

Referentie: https://techblog.dirkhornstra.nl/node/496

Eerst Terminal.
Die heb ik al eens eerder op een editie van Build gezien en is zo te zien verder gegroeid; In deze sessie wordt de preview-versie gedeeld: link. Deze brengt je naar de versie waar actief aan ontwikkeld wordt. Daar kan mogelijk wel eens iets mee kapot gaan. We zullen zien of dat zo is. Mocht je de voorkeur geven aan de "stabiele versie": link.

We gaan door met de "powertoys". Ik kan me nog herinneren dat die ook in Windows 95 of Windows 98 waren: link.

Geïnstalleerd en vervolgens gaan kijken wat deze versie te bieden heeft;

  • De eerste is een goeie: "altijd op voorgrond". Met de Windows-toets, CTRL, T kun je een venster vastmaken of los laten. Dus niet gestoord worden door andere apps die ineens in je scherm springen. Visual Studio / Visual Studio Code zou een kandidaat zijn, alleen ben ik benieuwd of het programma wat je start/debugt ook op de achtergrond blijft, want dat wil je dan eigenlijk weer niet.
  • Awake: ben je met een zware taak bezig die lang duurt, gaat je scherm uit, later zorgen de energie-instellingen dat je harde schijf in pauze-stand staat. Met "awake" hou je jouw computer wakker.
  • Colorpicker: Je ziet op je scherm iets waarvan je denkt: welke kleur is dat eigenlijk? Met Windows-toets, SHIFT, C kun je m picken en krijg je de waarde op je klembord. CTRL-V en maar!
  • Fancy-zones: zorg voor een standaard indeling op je scherm. Altijd Slack in het rechterdeel, Visual Studio in het linkerdeel.
  • File Locksmith: je wilt één of meerdere bestanden verwijderen, maar je krijgt de melding "file is in use". Maar door wat dan? Met File Locksmith kun je dat zien en die referenties ook afsluiten zodat je daarna met het bestand kunt doen wat je wilt!
  • Verkenner-invoegtoepassingen: hiermee kun je al een voorbeeld van bepaalde bestanden zien. Als je niet exact weet "welk bestand het was" hoef je nu niet alles te openen, maar kun je met de preview al zien of je het juiste bestand geselecteerd hebt.
  • Host File editor. Dat blijf ik lekker met het handje doen via windows/system32/drivers/ets/hosts
  • Image resizer: in bulk afbeeldingen aanpassingen. Daar blijf ik Irfanview wel voor gebruiken.
  • Keyboard Manager: hiermee kun je shortcuts toewijzen aan acties, ook per programma.
  • Muishulpprogramma's: hier zijn een aantal opties maar de coolste vind ik "mijn muis zoeken". Als ik mijn laptop aangesloten heb op mijn grote scherm, dan wil de muis nog wel eens ergens staan waar ik m niet zie. Bij de configuratie even op "schudden" zetten en als je dan even flink heen en weer gaat met de muis, dan komt ie duidelijk in beeld met een wit rondje, alsof er een spotlight op gezet wordt. Handig!
  • Mouse without borders: verplaats de muis van je laptop naar de computer van je buurman die in hetzelfde netwerk zit (en bij de configuratie jouw key heeft overgenomen).
  • Plakken als tekst zonder opmaak. Met Windows, CTRL, ALT, V kun je nu tekst plakken als "platte tekst". Een zegen! Want al die mensen die teksten uit Word kopiëren naar het CMS van de website, waardoor er allemaal "shit" in de broncode komt, de uitlijning, opmaak nergens meer naar lijkt en dan bij jou geklaagd wordt. En "eerst plakken in Kladblok, daaruit kopiëren naar het CMS", dat is te ingewikkeld.
  • Kort weergeven. Heb je een afbeelding geselecteerd, dan kun je met CTRL, SPATIE snel een voorbeeld zien. Ik weet niet of ik dat nodig heb.
  • PowerRename: snel in bulk bestanden hernoemen. Ik denk niet dat ik het nodig heb.