HansR on the Web: June 2018

6/28/18

This week's Wednesday Evening Training: Angular state management with ngrx/store, introduction to state management pattern, project walkthrough and handson labs

This wednesday evening, Wouter de Bruin, Roel van de Grint and I gave an introduction to Angular Application State Management using Redux and NgRx/Store.

So what are we talking about anyway?

Nowadays, the client part of web applications has become much more complex than the relative light weight websites in the old days. They have become Single Page Applications in which multiple independent actors all compete in updating the model in parallel. Keeping track of the actual state of an application and having all actions be done in a predictable order has become increasingly difficult and let's the code become dangerously difficult to manage.

NgRx/Store and comparable mechanisms offer ways to manage this "State" in an orderly fasion and coordinate actions in such way that the applications' behaviour stays predictable. Actors can request a state change and subscrive to state changes. Having this mechanism also offers a good opportunity for logging the applications' behaviour by keeping track all states in a history. And if the application's behaviour is not influenced by other processes' behaviour, you could even use this history to restore previous states and "rewind" and "replay" the application's behaviour.

In a nutshell: State Management offers manageability and more and solutions like NgRx/Store helps you implementing this in an efficient manner.

This evening, we were given a lot of code walkthroughs in some nice examples. Wouter and Roel prepared a set of handson labs for us that gave us plenty opportunity for excercise and experimentation. There was also plenty of room for Q&A and to discuss other technologies involved. With NgRx/Store, a set of tools for testing and monitoring is also offered. For Chrome, for example, there is a nice plugin available.

We will definitely have a sequel to this session, since it's quite an important topic in client side software development.

Thanks Wouter and Roel, for sharing your knowledge with us!

Next week

In next week's Wednesday Evening Training, we'll be continuing our handson labs and experiments using WebAssembly with our colleague Hans Harts.

Past Wednesday Evening Trainings

You'll find post of previous sessions in LinkedIn as well, see: https://www.linkedin.com/search/results/content/?keywords=%23wednesdayeveningtraining

#capgemini #werkenbijcapgemini #lifeatcapgemini #wednesdayeveningtraining #angular #ngrx #patterns

6/20/18

This week's Wednesday Evening Training: a practical introduction on the Aurelia framework

This week's Wednesday Evening Training Ilyas Sener gave us an excellent introduction on the Aurelia framework.

Aurelia is a JavaScript client framework for web, mobile and desktop Single Page Applications. It has modern architecture, two-way databinding, extensible HTML, routing & UI composition, broad language support and uses ES5, ES2015, ES2016 and TypeScript.
Aurelia is similar to Angular, but seems faster and simpler to use.

We were given extensive explanation on the concepts and programming techniques, illustrated with lots of code examples.
Also, Ilyas gave us a demo of debugging JavaScript applications using the Chrome browser platform. This alone could fill an entire Wednesday Evening Training session.
There was plenty of room for Q&A and to discuss the technologies involved.

In the next Wednesday Evening Training "klusavond" on JavaScript technologies, we'll definitely continue our Aurelia handson labs.

Thanks Ilyas, for sharing your knowledge!

Next week

In next week's Wednesday Evening Training, we'll be taking a close look at Application State Management, specifically using ngrx/store. Application State Management is a pattern that (in a nutshell) can help to simplify your code when reacting to events.
Our colleague Wouter de Bruin will give us an introduction on the implementation of ngrx/store, based on one of our latest project implementations. I'll be giving a short introduction on the pattern(s) involved.

Past Wednesday Evening Trainings

Thought of the day: on software architecture

Thought of the day, on software architecture:

"Blocks and arrows always work, software doesn't."

HansR on the Web, june 20, 2018.

6/13/18

This week's Wednesday Evening Training: continuing our IoT handson labs (Raspberry Pi, Arduino and lot's of LEDs)

In this Wednesday Evening Training we continued our IoT labs on Arduino and Raspberry Pi. There was soldering (yes, the LED cube), even more LED's, a quick intro to Arduino (C) programming and my first steps in programming the Arduino Nano using the web and windows editor.

We programmed a long LED strip and experimented with various light color and sequence patterns.

Aish gave us a quick intro into the C programming language (actually, for some of the older colleagues like me, it was a recap of a language that we learned a long time ago :) ) and the basics in writing/reading the Arduino ports.

We also experimented with the Arduino's web editor which offers a nice online IDE (Integrated Development Environment), with example projects available as well.

In the Wednesday Evening Training of july 11th, we'll continue our labs. We'll have a demo/walkthrough on an IoT project using multiple sensor at the same time and we'll be taking a closer more comprehensive look at the Arduino's IDE. It may also be a good time to look for future handson labs... maybe a programmable robot arm?

Thanks Aish for sharing your knowledge!

Next week

In next week's Wednesday Evening Training, we'll be taking a close look at the Aurelia framework. Aurelia is a JavaScript client framework for web, mobile and desktop that leverages simple conventions to empower your creativity. It's a kind of Angular, React or Knockout. Some key point of Aurelia: modern architecture, two-way databinding, extensible HTML, routing & UI composition, broad language support, use ES5, ES 2015, ES 2016 and TypeScript, testable… etc.

Past Wednesday Evening Trainings

6/6/18

This week's Wednesday Evening Training: Infrastructure basics, part 3: Various topics

This week's Wednesday Evening Training: Infrastructure basics, part 3: Various topics

There is a lot to learn on infrastructure, both for sysops, developers and architects.

In this Wednesday Evening Training two of our infrastructure experts, Rene Scholten and Bas Wienen gave us plenty explanation on various infra topics, e.g. network topologies, trusts, encryption and certificates, devops, desired state configuration and Microsoft Azure.

We even got a nice demo / walkthrough of an Azure based network infrastructure and a short introduction to Microsoft flow.

Thanks Rene and Bas!

Plenty of opportunity for Q&A and discussion. It was informative and fun. There will definitely be a next WET session on this, probably with some handson labs. There is plenty to choose from!

Past Wednesday Evening Trainings

You'll find post of previous sessions in LinkedIn as well, see: https://www.linkedin.com/search/results/content/?keywords=%23wednesdayeveningtraining

Next week

In next week's Wednesday Evening Training, we'll be working on our IoT (Internet of Things) projects. Raspberry Pi, Arduino and WittyCloud are platforms we are currntly experimenting with.

#capgemini #werkenbijcapgemini #lifeatcapgemini #wednesdayeveningtraining #microsoft #azure #infrastructure #sysops #networking #devops

6/5/18

Week 23's Digest: on Blockly, GraphQL and ASP.NET Core, Windows 10, Blazor, WebAssembly, IoT, patterns, Archimate, GitHub and more...

This week's selection of articles I read & sites I visited...

Blockly: Blockly is a client-side JavaScript library for creating visual block programming languages and editors.

More: https://developers.google.com/blockly/
GraphQL with ASP.NET Core (Part- I : Hello World): GraphQL with ASP.NET Core, a compact intro in 5 parts. GraphQL provides a declarative way in which you can fetch data from the server.The articles show how you can integrate GraphQL with ASP.NET Core it and use it as a query language for your API. As a basis, GraphQL for .NET (http://graphql-dotnet.github.io) s used. Part I: Hello world.

More: http://fiyazhasan.me/graphql-with-asp-net-core/
GraphQL with ASP.NET Core (Part- II : Middleware): GraphQL with ASP.NET Core Part- II: Middleware

More: http://fiyazhasan.me/graphql-with-asp-net-core-part-ii-middleware/
GraphQL with ASP.NET Core (Part- III : Dependency Injection): GraphQL with ASP.NET Core Part- III: Dependency Injection

More: http://fiyazhasan.me/graphql-with-asp-net-core-part-iii-dependency-injection/
GraphQL with ASP.NET Core (Part- IV : GraphiQL - An in-browser IDE): GraphQL with ASP.NET Core Part- IV: GraphiQL - An in-browser IDE

More: http://fiyazhasan.me/graphql-with-asp-net-core-part-iv-graphiql-an-in-browser-ide/
GraphQL with ASP.NET Core (Part- V : Fields, Arguments, Variables): GraphQL with ASP.NET Core Part- V: Fields, Arguments, Variables

More: http://fiyazhasan.me/graphql-with-asp-net-core-part-v-fields-arguments-variables/
Here Are the Features You Should Care About in Microsoft's Windows 10 April 2018 Update: A lot of new features in Windows 10: e.g. Near Share, Focus Assist, Timeline, Microsoft Edge webbrowser, Cortana and the Game Bar.

More: https://lifehacker.com/here-are-the-features-you-should-care-about-in-microsof-1825642722
Microsoft Forms is now available for the enterprise: With Microsoft Forms, your employees can easily solicit client input, measure customer satisfaction, and organize team events, within minutes. The app is simple to use and works on any web browser, so it can be accessed from anywhere, anytime. With real time responses and automatic charts built in, Microsoft Forms makes it easy to understand the data right away.

More: https://mspoweruser.com/microsoft-forms-is-now-available-for-the-enterprise/
Microsoft .Net Framework 4.7.2 released: Microsoft .Net Framework 4.7.2 is a new version of Microsoft's .Net Framework. The new version is integrated in the Windows 10 April 2018 Update release.

More: https://www.ghacks.net/2018/05/01/microsoft-net-framework-4-7-2-released/
Analyze This: Understand Microservices Monitoring: As the number of microservices grow and the complexity of the processes increases, getting visibility into these distributed workflows becomes difficult. This article describes some of the challenges and solutions.

More: https://thenewstack.io/analyze-this-understand-microservices-monitoring/
Web Browser Automation with Selenium using Node.js: Selenium is a suite of tools that enable the automation of web browsers across multiple platforms. The article describes how to use one of Selenium's components, i.e. WebDriver to automate a given use case.

More: https://www.codeproject.com/Articles/1241573/Web-Browser-Automation-with-Selenium-using-Node-js
Blazor 0.3.0 experimental release now available | ASP.NET Blog: Blazor 0.3.0 is now available! This release includes important bug fixes and many new feature enhancements:
Project templates updated to use Bootstrap 4
Async event handlers
New component lifecycle events: OnAfterRender / OnAfterRenderAsync
Component and element refs
Better encapsulation of component parameters
Simplified layouts

More: https://blogs.msdn.microsoft.com/webdev/2018/05/02/blazor-0-3-0-experimental-release-now-available/
Why did we build React?: There are a lot of JavaScript MVC frameworks out there. Why was React built and why would you want to use it? First of all: React isn’t an MVC framework. React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.

More: https://reactjs.org/blog/2013/06/05/why-react.html
ASP.NET Patterns every developer should know: A nice introduction on patterns and explanation of the basics of some of these you should definitely know.

More: https://www.developerfusion.com/article/8307/aspnet-patterns-every-developer-should-know/
Combining ArchiMate® 3.0 with Other Standards – UML / SysML / ERD: ArchiMate models can usefully be combined with models in other techniques, in order to zoom in on specific aspects of your enterprise. If these models are tied in to an overall enterprise architecture model in ArchiMate, an integrated model of the enterprise can be constructed that relates (sub)models from formerly separate domains in a meaningful way.

More: http://blog.bizzdesign.com/combining-archimate-3.0-with-other-standards-uml-/-sysml-/-erd
Page Transitions for Everyone: Animation matters. It can be used to improve the user experience.

More: https://css-tricks.com/page-transitions-for-everyone/
BlazorBricks - WebAssembly with Blazor: Developing Single Page Applications with C# Code and Blazor. This article uses a bricks game written (almost) entirely in C#, and with the help of Blazor project we will explore this brave new world of the technology called WebAssembly, discussing what it does and what it does not, how it interacts with JavaScript and how it is generated from the good old C# language.

More: https://www.codeproject.com/Articles/1241210/WebAssembly-with-Blazor
WebAssembly Physics and DOM objects: In this combined SVG / WebAssembly codelab you will build a web application that shows an hourglass built with SVG graphics. Your app will:
Create some DOM nodes to represent grains of sand.
Interface to a physics engine compiled from C into WebAssembly.
Set up the physics engine from geometry created in Javascript.
Dynamically update the positions of the grains of sand by calling into the Wasm physics engine.

More: https://codelabs.developers.google.com/codelabs/hour-chipmunk
Google CodeLabs: Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, Project Tango, and Google APIs on iOS.

More: https://codelabs.developers.google.com/
GitHub aspnet/Blazor - Blazor is an experimental .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly: Blazor is an experimental .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly. More on this on my previous blogs on the #wednesdayeveningtraining.

More: https://github.com/aspnet/Blazor
Hello wasm-pack!: wasm-pack is a tool for assembling and packaging Rust crates that target WebAssembly. These packages can be published to the npm Registry and used alongside other packages. This means you can use them side-by-side with JS and other packages, and in many kind of applications, be it a Node.js server side app, a client-side application bundled by Webpack, or any other sort of application that uses npm dependencies. You can find wasm-pack on crates.io and GitHub.

More: https://hacks.mozilla.org/2018/04/hello-wasm-pack/
Sneak Peek at WebAssembly Studio: WebAssembly.Studio is an online IDE (integrated development environment) that helps you learn and teach others about WebAssembly. It’s also a Swiss Army knife that comes in handy whenever working with WebAssembly.

More: https://hacks.mozilla.org/2018/04/sneak-peek-at-webassembly-studio/
WebAssembly Studio: WebAssembly.Studio. An is an online IDE (integrated development environment) that helps you learn and teach others about WebAssembly. It’s also a Swiss Army knife that comes in handy whenever working with WebAssembly.

More: https://webassembly.studio/
IIS CORS Module: The Microsoft IIS CORS Module is an extension that enables web sites to support the CORS (Cross-Origin Resource Sharing) protocol. The IIS CORS Module enables support for the Cross-Origin Resource Sharing (CORS) protocol. CORS is a mechanism to let a user-agent access resources from a domain outside of the domain from which the first resource was served. CORS defines a way by using additional HTTP headers to allow request permissions to access a selected resource.

More: https://www.iis.net/downloads/microsoft/iis-cors-module
SDN Magazine 134: Informative magazine (in Dutch) of the Software Development Network (SDN). In this issue:
Azure Functions in Linux - Tom van de Graaf
'Let’s Encrypt' Azure Web Apps (en vernieuw automatisch je certificaten!) - Maarten van Stam
The Product Owner: The Single-person Bottleneck - Sander Hoogendoorn
Devs, help die Ops mensen DevOps te doen - Jeff Wouters
Azure Service Fabric - Andries van der Meulen

More: https://www.sdn.nl/MAGAZINE/ID/1314/SDN-Magazine-134
Microsoft + GitHub = Empowering Developers: Microsoft has announced an agreement to acquire GitHub, the world’s leading software development platform. What will this acquisition mean for the ICT industry and for developers?

More: https://blogs.microsoft.com/blog/2018/06/04/microsoft-github-empowering-developers/
Teardown: Bank card reader ABN-AMRO e.dentifier2 (part 1): Taking a look inside a bank card reader ABN-AMRO e.dentifier2. Instructive and fun!

More: https://www.youtube.com/watch?v=leq9zHxpAJc
Teardown: Bank card reader ABN-AMRO e.dentifier2 (part 2): Made: Re-using a salvaged LCD on Arduino and ESP - ABN-AMRO e.dentifier2 (part 2). Even more fun!

More: https://www.youtube.com/watch?v=NXtHkjaIge0

HansR on the Web

6/28/18

This week's Wednesday Evening Training: Angular state management with ngrx/store, introduction to state management pattern, project walkthrough and handson labs

So what are we talking about anyway?

Further reading

Next week

Past Wednesday Evening Trainings

6/20/18

This week's Wednesday Evening Training: a practical introduction on the Aurelia framework

Further reading

Next week

Past Wednesday Evening Trainings

Thought of the day: on software architecture

6/13/18

This week's Wednesday Evening Training: continuing our IoT handson labs (Raspberry Pi, Arduino and lot's of LEDs)

Further reading

Next week

Past Wednesday Evening Trainings

6/6/18

This week's Wednesday Evening Training: Infrastructure basics, part 3: Various topics

Further reading

Past Wednesday Evening Trainings

Next week

6/5/18

Week 23's Digest: on Blockly, GraphQL and ASP.NET Core, Windows 10, Blazor, WebAssembly, IoT, patterns, Archimate, GitHub and more...