DEV Community: Harald Reingruber

Three.js Visualizations with Theo Armour (Week 2)

Harald Reingruber — Wed, 29 Apr 2020 17:00:15 +0000

- Week 2 of my Remote Pair-Programming Tour -

Theo found out about my tour from my outreach email campaign and liked the idea from the beginning. He even offered to cover my accommodation costs in San Francisco, but due to COVID-19 I had to return to Austria before I was able to start my tour. Thankfully, Theo was still interested in continuing the collaboration and knowledge exchange online and I was happy to find out how he was using three.js for the COVID-19 visualization and his various other projects.

Shared passion for 3D visualization and three.js

Theo is working on some really interesting projects, all FOSS and based on three.js.

He is really passionate about how "easy" and fast you are able to visualize 3D content in the browser using three.js, and his excitement is not only justified but also very contagious. Collaborating on three.js projects was an awesome tour stop for me, and I enjoyed a lot figuring out how I can support Theo on his tasks and brainstorm with him about his future visions.

Interesting projects Theo is working on

Theo likes to create web apps with plain vanilla JavaScript and three.js. He has an uncountable number of projects and repositories on Github, which he created while experimenting with the reimagination of visualizing things (objects or information) in 3D.

COVID-19 Viz3D

A couple of weeks ago, with the start of the COVID-19 pandemic, Theo started a project to visualize the global statistics on a 3D globe in the browser, fetching data from the John Hopkins University and Wikipedia. Here is the COVID-19 Viz3D, which is also static HTML with plain vanilla JavaScript, only depending on three.js and fully running in the browser for desktop and mobile devices.

Spider gbXML Viewer

One very remarkable project is the gbXML viewer, which allows to view building data stored in Building Information Models (BIM). Check out this online demo of the Spider gbXML Viewer, I especially like the exploded view and the possibility to toggle the view between interior/exterior surfaces which can be found in the popup menu on the right.

three.js cookbooks

There are hundreds of HTML and JavaScript snippets, which Theo published in his "cookbooks", like this one. The idea is to have browser-ready online demos, where also people new to JavaScript and programming in general are able to copy, paste and adapt the code snippets from the github repository.

Time zone difference and common working hours

Theo usually works in the afternoon and evening. Combined with the nine hour time zone difference between Pacific and Central European time, it was not so easy for us to find time slots which was working well for both of us.

In the beginning we tried to do two 2-hour slots in the morning and evening, but we soon realized it is better to have only one session per day instead of switching back and forth. After several sessions, we decided that doing 2-hour sessions twice a week works best for us. I've kept "week 2" in the title of this article, which is the week of my tour where we started collaborating. We continued collaborating in the weeks after at a lower pace.

Topics Theo and I were collaborating on

After Theo showed me what he was working on, we figured out which topics might be interesting to start working on and kicked off our collaboration.

three.js performance profiling and improvement

COVID-19 Viz3D should run in browsers of mobile devices as well as desktop computers, which makes it especially difficult to stay within the 60 FPS goal.
We noticed that mainly the CPU usage is our bottleneck, because we saw in the Windows task manager that the GPU utilization didn't seem to be very high. We used the three.js inspector to disable certain three.js groups and saw that the cylinders seem to take most of the computation time. The scene contains more than 400k triangles, which seem to be too much to run well on all platforms, at least without further optimizations.

From Unity3D I knew if the triangle count is the issue, there are tricks like batching draw calls for meshes with the same material. A first search how this could be achieved with three.js made us considering to use BufferGeometryUtils.mergeBufferGeometries() to merge all cylinders into one triangle mesh, but this way the raycaster for showing the statistics for each country when hovering the cylinder would not be able to return which mesh was hit by the raycast as easily.

A couple of days later Theo found out that there is a rather new functionality in three.js called InstancedMesh, which allows to create multiple/many instances of the same mesh. Bingo, now all 400k triangles are processed in one draw call a lot faster, and the three.js raycasting mechanism returns the corresponding instance ID which allows to display the data to the corresponding cylinder.

Calendar versioning and automated deployment

Theo uses a calendar versioning approach, which allowed him to run different versions (by date) directly in the browser from Github Pages. He tried to create a new feature for the COVID-19 Viz3D every day, and a menu linking to all daily versions clearly shows the impressive progress the project had during a couple of weeks.

Separation of concerns

While working with him, I noticed that because of creating copies of the source folders, Git can not be used to it's full extent as it looses the connection between the different versions. Still, the advantages of having all versions online in parallel is evident. My gut feeling was if the concern of versioning are separated from the concern of deployment, Theo could benefit from having all previous versions online while being able to use the full power of Git versioning.

Continuous deployment of tags/branches

We made a plan, to experiment with a couple of workflow changes:

Configure Github Pages to use a separate gh-pages brach, instead of master, which contains the sub-folder with all relevant source files
Create a branch or tag for each version
The development branch will only contain the current version
A deployment script will update the gh-pages branch and copy the current version to a sibling folder named after the branch name
The script will be executed on every new commit pushed to Github, by a continuous integration service like Github Actions, Travis CI, Circle CI, Gitlab CI, etc.

ESlint

Theo knew that there is value in using tools for auto-formatting your code and static code analysis, but ESLint has a high learning curve if you are not very familiar with the Node.js ecosystem and NPM.

I know how much you can learn from the suggestions of static code analysis, and how much more readable code with consistent styling is. Our eyes and brain unconsciously detect even slight differences, which consumes cognitive energy you might want to reserve for the actual task you are working on. But you don't want to spend the cognitive energy on sticking to strict coding styles either, which is why tools doing that for you are very helpful.

Helping Theo with a initial setup of ESlint and simple NPM scripts for linting and fixing the JavaScript files, allows him to step-by-step get used to the workflow and adjust the ESLint rules to his preferences. Later he will be able to copy the settings to other projects as well.

Looking back

It is really impressive to see that the people involved in software development are as diverse as the topics and technologies we are working on. Theo studied and was working as an architect and was involved with developing CAD software. His enthusiasm is driven by working on prototypes and showing what can be achieved with technology.

I recently heard about the difference between Makers vs. Menders. Makers enjoy quickly building things while menders enjoy to analyze and improve things little by little looking for the mid-/long-term success.

Not knowing how Theo would see himself in this categories, while working with him he reminded me of makers by this definition. I don't think this can or should be distinguished clearly, but it's definitely good to know the tendency. I would count myself as a mender, while I am also enjoying working on prototypes from time to time. Ultimately, you want to have both types of personas in your team to turn up the good. This is probably one of the reasons why our collaboration was inspiring and a valuable learning experience for both of us.

Bottom line, collaboration is really awesome and I am already looking forward to my next sessions with Adrian Bolboacă. 😃

Remote Mob-Programming @Hunter Industries (Week 1)

Harald Reingruber — Wed, 08 Apr 2020 16:15:06 +0000

- Week 1 of my Remote Pair-Programming Tour -

My Pair-Programming Tour on the US West Coast ended right before it even began. The COVID-19 pandemic forced me to return to Austria, a couple of days after I arrived in San Diego (California), where my tour would have started at Hunter Industries.

From On-site to a Remote Pair-Programming Tour

Thankfully all my 3 confirmed tour stops agreed that we can do the planned pair-programmed sessions also online. While I am very happy that I didn't have to cancel my tour completely, I am a bit sad that the opportunity of meeting very interesting developers, companies and humans in person. Also, the 9-hour time zone difference adds another challenge, which means we only can collaborate for half-day sessions in the pacific-time morning (evening in Austria).

Mob-Programming Invitation

Austin Chadwick of the Mob Mentality Show pod-/videocast crew invited me to join the mob-programming sessions after I saw a tweet about their show from Amitai Schleier and I reached out to them.

My only mob-programming experience before was a one-hour session at a code retreat organized by the Softwerkskammer Vienna group. Back then, I liked the idea but didn't pay more attention to it as in my experience it was already difficult to convince teams/employers of the advantage of pair-programming, so I assumed it would be even worse for mob-programming.

My favorite quote from the Mob Mentality Show:

Solo development feels like sitting at home watching Netflix.
Mob Programming feels like going out to a movie with friends.
Pair Programming feels like going on a date.
-- unknown

Watching the videocast of Austin and Chris Lucian was really an eye-opener to me and I was very curious about joining their mob-programming sessions.

Mob-Programming at Hunter Industries

Mob-programming with at Hunter Industries.

Last week my tour finally started and I joined the mob of Alex, Matt, and Austin from remote from Austria. Because of COVID-19 they had to switch to working from home the week before as well. They were using Microsoft Teams for the online collaboration and accessing their on-site mob station via Anydesk. All of us were quite surprised that the oversea video-connection between us didn't cause a noticeable delay. They said they sometimes have more trouble talking to people (online) who are close by.

Dealing with Email in a Mob

They had one mailbox for the mob, where all the development related Emails were sent to. Every morning after the daily meeting with the Product Owner (PO), they were dealing with the mails, in a mob-programming style (with Driver/Navigator roles). It took usually around 5-15 minutes, and that was it regarding mail for that day, no further interruptions for checking mailboxes.

Test-driving a small improvement

The team is working on a mobile app of Hunter Industries Internet of Things (IoT) system. One of the first tasks was to add an "in-progress" feedback when fetching data, which could take a couple of seconds. From a user perspective, this improvement is actually not small at all, as it might avoid confusion when the app doesn't seem responsive. It was really nice to see how the development in the mob was working out very fluently. We were using the Mobster pair-/mob-programming timer, switching Driver/Navigator roles every 6? minutes.
First, we wrote a failing test, then the production code was moved forward. When the new test was succeeding it was time for refactoring, where we also watched out if the Scout Rule can or should be applied.

Mob-programming allows fast onboarding and contributing quickly

It was interesting to see, that the mob was not slowing down much while I was learning and getting to know the project and the processes. In contrast to switching from solo-development to pair-programming, joining a mob is definitely less disruptive, which is probably not really surprising. Another interesting aspect was, that I was able to contribute ideas and solutions within the first couple of hours, even though I never worked with that specific platform-independent mobile app development framework before. As there were 3 other developers knowing the details and concepts of the framework it didn't really slow us down because I didn't know them. I have experience with similar frameworks and many concepts in programming are similar in many programming languages, so for many discussions I was still able to contribute valuable input. This was really motivating and quite a different experience compared to the usually very dense and at least perceived slow onboarding when you are working alone or with an expert developer of the new team, for example when starting working at a new company.

New (non-trivial) feature development felt a bit sluggish?

In the middle of the week, we started to work on a feature that was new and more difficult. The feature was required in order to further improve the performance and responsiveness of the app.

When we started, there were many questions and unknowns. How to test this? Which parts do we have to mock in order to be able to write tests and isolate the test units from each other? Do we start with the small technical details (bottom-up/Detroid School TDD) or with the top-level requirements (top-down/London School TDD)? As often the answers are to some extend also a matter of taste and the arguments for one or the other are not really known in the beginning the direction in which we were going was depending a lot on the current navigator. As the navigator role was switched, sometimes it was leading to a change of direction as the picture on which path was better was not yet developed and/or was perceived differently within the team.

We talked about this later in the retrospective, that this was a bit of a surprise to me. It was probably also the case that in a mob, a process feels sluggish much earlier when 4 people are working on one task, compared to if a developer is struggling with starting a new feature for hours. Another difference is that when working alone, you sooner take one direction and continue as you don't have to justify or discuss the idea with others (ideally you had a discussion with the team before starting to work on the feature). This way, the development is perceived faster, but in some cases, you might have to invest more time in refactoring or changing the initial idea later (maybe already during the review). My mob was not surprised about my observation about this exploratory task and saying that this is quite certainly outweighed by the improved outcome and the much faster development time in other phases (bug fixing, refactoring, etc.).

I really like this quote about mob-programming:

In practice it feels more like a bulldozer than a race-car - unstoppable and thorough.
--unknown

Splinter Group Pattern

On Thursday, the mob had to prepare for the monthly department-wide status meeting, where the top-level management of Hunter Industries informed themselves about the current state of the developments. We still wanted to move the code forward, so we decided to create a splinter group. Alex and me continued test-driving the new caching feature, while Austin and Matt were working on preparing the slides and reports for the meeting in the afternoon. After lunch, we joined the mob again and discussed the results of both teams.

Group learning session

On Friday, we reserved 2 hours for a group learning session, which was announced department-wide and everybody who was interested was able to join. I shared my experience and the ideas of Git-bisect, the idea of my Pair-Programming Tour and asked several questions about mob-programming.

Austin, Kirjsten and Matt during our group learning session.

When I asked my mob-programming questions in the end, it led to a lively discussion which was very insightful and I'd like to share my takeaways from it:

1. Why is Hunter Industries cool with often having guests joining the mob-programming sessions?

When I reached out to Austin during the preparation of my tour, he said that they have guests joining their mobs regularly, so the process would be simple for me as well. I asked them if it was difficult to get support from their managers, or which value they saw in having guests joining. The response was that there were 2 advantages they saw in frequently hosting guests. The obvious one is that next to sharing their knowledge and mob-programming experience their teams also often get very good input from their guests and different perspectives. The other advantage was that it is good PR for their recruitment efforts. Hunter Industries is known in the development and agile world as the inventor of what we today call mob-programming, and they are doing it already for almost 10 years. The guests who visit them talk and write about it, which in turn will raise the interest of developers sharing the same or similar values.

2. Would you say mob-programming might become the future for every developer?

This was more a provocative question, which I told them, and I explained that I was more interested in their thoughts than the actual answer.
I think there was a wide agreement that, similar to pair-programming also mob-programming is definitely not optimal for every developer, and that every team and every developer has to figure out themselves what works well and what doesn't work well for them.

Fred Zuill and Austin Chadwick on a screenshot during our group learning session.

I like how Fred Zuill, who also joined the group learning, explained his thoughts, saying that there is this thing called mob-programming today, which might develop into something that we will call differently tomorrow. One thing that will for sure spread to a big part of the industry is the need for faster innovation and that the close collaboration improves learning and leads to better results. How that collaboration will look like might vary and change.

3. Do you know small companies practicing mob-programming?

The idea behind this question was that for small companies having the trust that forming a mob of 3-4 people, maybe having only a single mob working on the tasks for creating and improving their software seems to me to be more challenging than for a larger company, already having established a constant cash-flow.
There were not really clear answers, there were one or two start-ups mentioned doing full-time mob-programming. Still, there was a general tone that even though the pressure for small companies might sometimes be higher, there are small companies doing mob-programming. Small companies often need to innovate faster, where mob-programming might come in handy.
Chris Lucian, the director of software development at Hunter Industries, shared a link to his blog where he compiled a list of companies doing mob-programming.

4. What would you recommend for introducing mob-programming to a team that never did it before?

Austin shared a nice website about mob-programming patterns with me, which also has a pattern describing beginning mob-programming.

Impression and conclusions of my first week

I really enjoyed my coding tour start with the team of Hunter Industries. Thanks Alex, Austin and Matt for inviting me to join their mob. Thanks Hunter Industries for having a guest-friendly mobbing policy, and being open to continue my visit from remote during the chaotic time of the COVID-19 crisis.

I have heard about the high-bandwidth learning during mob-programming before and liked it a lot experiencing it with the mob at Hunter Industries. Also, I think that mob-programming created a very mindful company culture at Hunter Industries, or was it the other way around? What I already realized that I like about going on a coding tour is, the experience while working on real-world tasks. I think that practicing certain techniques and experimenting with coding katas, for example at coding dojos or code retreats is really important and helpful, it's still often difficult to apply certain ideas on the task in the every-day job.

Looking forward to the impressions, conclusions and insights of the next week of my Remote Pair Programming Tour while working on projects using three.js with Theo Armour.

Remote Pair-Programming Tour => Invite Me for Free Sessions

Harald Reingruber — Tue, 03 Dec 2019 15:26:57 +0000

Cover image credits: Calqui - Own work, CC BY-SA 3.0

Update (March 24) - Transition to doing a Remote Pair-/Mob-Programming Tour:

Due to the current pandemic situation, I had to return from the US right before my tour even started. The absolutely amazing thing is, that most of the developers I have had planned to visit are on-board continuing online. So I've decided to do a Remote Pair-/Mob-Programming Tour instead, hence I can join you no matter where in the world you are located. That is so cool 👌

Are you interested in pairing/mobbing with me? Please reach out to me!

Here is my current tour schedule:

Week	Date	Developer/Company	Topics
1	March 23-27	Austin Chadwick, Hunter Industries	C#, Xamarin, .NET Core, TDD, Mob-Programming
2	March 30-April 3	Theo Armour	JavaScript, three.js, Pair-Programming
3	April 6-10	Adrian Bolboacă	Dart, Flutter, Mobile, TDD, Pair-Programming
4	April 13-17	Johnicolas Hines, Glitch	TypeScript, Node.js, TDD, Pair-Programming
5	April 20-24	Mike Clement, Emmersion Learning	TypeScript, Angular, .NET Core, TDD, Mob-Programming
6	April 27-May 1	Peter "Code Cop" Kofler	Unity3d, TDD, Pair-programming
7	May 4-8	Fabien Benetou, European Parliament Innovation Lab WebXR	A-Frame, Mozilla Hubs, Pair-Programming
8	May 12-15	Kieran Farr	A-Frame, Streetmix3D, Pair-Programming
9	May 18-22	Ted M. Young	JavaScript, TDD

Original Pair-Programming Tour Article:

I will be coming to the US in March/April 2020 for a pair-programming tour. My current plan is to have several stops along the west coast. Currently, I've planned to be touring in the following areas: ~~San Diego, San Francisco/Bay Area, Portland and Vancouver~~.

TL;DR

Invite me to join you for a couple of days pairing or mobbing with you, while working on your current tasks/project.

Who is Harald?

I'm an enthusiastic software engineer with 10 years of professional experience working in different areas of visual and spatial computing.
I have hands-on experience with delivering high-quality software, but I also like working on prototypes/MVPs for measuring traction before adding unnecessary complexity.

Together with friends, I am organizing the Vienna Unity 3D Meetup. Our motivation is to build up a local community for discussing how to apply software engineering best practices when developing graphics-intensive applications with a game engine like Unity.

What is this Pair-programming Tour?

It’s when a programmer briefly visits several companies to join them in their coding work and to learn from each other.
-- Amitai Schleier

Corey Haines coined the term Journeyman Tour, an analogy to the journeyman years of medieval craftsmen (e.g. the German "Walz"), who were visiting several master after their apprenticeship in order to grow professionally and to become a master of their field themselves.

German journeymen (craftsmen) in traditional dress. Photo credits: A.stemmer, CC BY-SA 3.0

Nowadays, there are similar programs in other industries that offer additional professional experience in exchange for supporting the host in their everyday work. It's probably more common in labor-intensive professions (e.g. organic farming), which surprises because the software engineering discipline is relatively young, the development processes are far from obvious and the variety how we work towards our goals is several orders of magnitude bigger than compared to working on/with physical things. At least, I think that this complexity in our industry has something to do with most of our tools and frameworks being virtual.

Learning on the go, and generating value on the way is crucial in order to balance priorities between business and engineering, except if there is a huge research budget.

How does it work?

The idea is simple: You (your employer) provide room and board. I pair/mob with you for a couple of days/weeks. We do it because we both expect to gain.

Why would a skilled developer offer his services for free?

Exactly. I am offering to share my knowledge and provide new insights for free. Why I am doing this?

I don't want to miss interesting opportunities because of troubles getting the budget approved. The risks and costs should be as low as possible. I will invest time and energy, but I should not have to invest my own money.

What can Harald offer to me and/or my company?

An absolute requirement is that we set goals so that we both can expect to gain value from my visit. Besides my learning from you, you will learn from me as well, and probably (depending on the goals) receive a direct contribution from me to your work.

I have hands-on experience in the following areas:

Software Engineering
- C++20, CMake, Make
- C# and Java
- TypeScript, JavaScript, Node.js, React, ReactNative
- Object-oriented and functional programming
- Clean Code, Refactoring, Loose coupled architecture
- Unit, Integration, Acceptance and UI Testing
- TDD
- Creating tests for legacy applications
- Performance profiling and memory leak analysis
- Open source license compliance
- Diving into new technologies/languages really quickly!
Visual Computing
- Unity3D, OGRE3D
- 3D scanning and scan processing (hole filling, volume computation, etc.)
- 3D cloud rendering service
- OpenGL, DirectX
- Augmented and virtual reality
- Video processing and streaming
- Image processing and analysis
- Medical visualization (radiology image data)
- DICOM
- Volume rendering
- SIMD, SSE, AVX, Arm Neon
- Emscripten/WebAssembly
DevOps
- Advanced GIT (Git LFS, Submodules, etc.)
- CI/CD Tools like Gitlab CI, Jenkins, TeamCity, Azure DevOps, Travis CI, CircleCI
- Docker, Docker Compose
- Cloud technologies (Google Cloud, Firebase, AWS, Azure, etc.)
- Bash scripting, Batch scripting, PowerShell

I like refactoring, eliminating code smells, decouple components, discuss architecture pros and cons, automate everything, improve team development experience, single-action build and test workflows, improve docs, find out almost everything the involved tools have to offer functionality wise. We won't run out of ideas about how I can support you.

Also, if we discover topics of general interest I am happy to give talks or workshops to the whole team.

What’s it like to code with Harald?

Harald is a fun coworker and downright team player who always tries to improve his and the team's performance by encouraging regular code reviews and practicing pair programming. He always strives to find a clean and elegant solution to the problem that integrates well with the existing codebase.
-- Ferdinand Pilz, three10 GmbH

Harald's eagerness to grow as a developer in order to perfect coding skills, as well as his willingness to share knowledge make him a first-class software craftsman. His strong enthusiasm for software development and collaboration among developers is an inspiration to me.
-- Alexander Hörmandinger, Agfa Healthcare GmbH

I love Harald's passion to explore new things and to share his skills with others. He always strives for the best practices, instead of the quick, "naive" solution. I worked with him for over 2 years. He definitely made me a better programmer!
-- Robi Hammerle, three10 GmbH

How can I get my own impression?

Let's do a 1-hour remote pairing session. Send me a request with your preferred date+time. See the contact details on the end of this article.

Did Harald come up with this idea himself?

There are several software craftsmen who did similar tours and inspired me a lot:

Journeyman Tour by Corey Haines

Probably the first coding tour, which inspired many others. The tour was also featured on InfoQ. Corey is also one of the inventors of the Code Retreat format.
Code Cop Tour by Peter "Code Cop" Kofler
Coding Tour by Amitai Schleier
Craftsman Swap by Nicole Rauch
and many more crafters...

It takes a lot of courage and effort planning and implementing such a tour, also it bears a risk when two parties who barely know each other agree to work together. My admiration for all the hosts and touring crafters who saw that the potential benefit is greater than the risks required to overcome.

What about my project/company secrets and intellectual property?

I am not interested in your customer or the project itself, just the learning and sharing. I will sign any NDA. If you do not want to be mentioned, I will not use your company's name in any posts or tweets. I will blog about my experiences during the tour. If a post covers my visit at your company I will show it to you before I publish it.

Let's talk!

Reach out to me, and let me figure out how I can create value for you:

Twitter: @Harald3DCV or
Email: harald.reingruber AT gmail.com

Thanks

Big thanks to @codecopkofler, @schmonz and @nicolerauch for the great support and valuable feedback while I was planning my pair-programming tour.

Ask me anything!

Leave your questions in the comments section, or contact me directly.