#updatecli #pipeline #jenkins #myheats #nodejs #npm

I was looking for a way to automatically bump the version of the npm dependencies (package.json) whenever there is an update available. This is also important for security reasons (e.g., have a look at the output of npm audit from time to time to see the recent security issues in the dependencies).

I was looking into Renovate and Dependabot, but neither of these scratched my itch of simple automatic dependency updates.

A coworker suggested me to try Updatecli and it fits my workflows perfectly well. The Jenkins example on the projects website got me started. So I created a Jenkins shared library function to run my own build, which includes npm to perform the version bumps:

• A class to describe the updatecli stages: https://code.in0rdr.ch/jenkins-lib/file/src/Updatecli.groovy.html

The scripted pipeline in the repository of the application loads the library and performs the version bumps to a new branch:

• The Jenkinsfile that makes use of the updatecli groovy library: https://code.in0rdr.ch/myheats/file/Jenkinsfile.html

I did not even have to configure Updatecli a lot, because the autodiscovery feature automatically detects that this is a npm repository/project. The final version of my pipeline includes all the git/scm steps in the updatecli.d/default.yaml configuration file:

• Updatecli configuration file: https://code.in0rdr.ch/myheats/file/updatecli.d/default.yaml.html

First I tried to perform the SCM/git steps in Jenkins checkout and sh steps. But I noticed it could be much sleeker by defining the SCM/git settings in the Updatecli config file directly. This way, updatecli takes care of the clone/checkout/push steps. Here the extract from my previous pipeline with the “manual git steps” for comparison:

// alternative approach I did not pursue any further
sh '''
git config --global user.name "$GIT_AUTHOR_NAME"
git config --global user.email "$GIT_AUTHOR_EMAIL"
'''

dir("myyheats.git-$BUILD_NUMBER") {
  // checkout update branch in new directory
  checkout scmGit(
      extensions: [localBranch("$branch")],
      userRemoteConfigs: [[url: 'https://git.in0rdr.ch/myheats.git']]
  )

  updatecli.run('apply')

  // commit changes
  sh '''
  git add -u
  git commit -m "chore(updatecli-$BUILD_NUMBER): bump node modules"
  git push -f -u origin "$branch"
  '''
}

I definitely like the updatecli configuration better, since it keeps the actual pipeline tidy. Also, I like how you can use the {{ requiredEnv "GIT_PASSWORD" }} configuration in updatecli to read secrets from the environment. The Git credentials are sourced from OpenBao with Nomad workload identities.

I hope the post is helpful for anyone that would like to give updatecli a try or would like to configure a similar Jenkins pipeline.

• Project site
• Demo instance
• Code

#coding #sports #myheats

I took advantage of the CSS flexbox layout to improve the design on mobile devices. The main idea was to reduce the table size to a minimum on small screen sizes. The individual cells of the table are shown as small boxes, with labels to indicate the content type.

On larger displays, for instance, a big screen at the finish line of a sport event/run, the table is displayed in a traditional fashion.

Here some more screenshots of the admin section with the new design.

The live-updating leaderboard:

The scoring section where judges can enter the scores. In this section, I found it important to indicate the loading status whenever the score is changed and to make the input field big enough for usage on small smartphone screens:

Friends told me that similar software has a feature to “lock” the scores once the scoring is done. Currently, there exists no such feature in MyHeats, but that's a good idea for my next hacking sess.

The section where event admins can create heats and manage the startlists for each run:

The administration of the athletes:

Athletes are not required to have a lastname. In this way, the leaderboard can equally well be used to score entire teams.

And last but not least, if you are reading until down here and you are interested in the technical implementation and the arrangement of the data in the database, here the database schema:

Interested in test-driving the scoring backend for judges and event admins? Drop me a line (see footer).

• 🚀 Demo instance: https://myheats.in0rdr.ch
• 🧬 Code: https://code.in0rdr.ch/myheats

Plan to work on some features the next few days: * Add/remove athletes (bulk) * Improve UI

#coding #sports #myheats

For more background on the app, the idea and the problem(s) it could solve have a look at the original post Live heats, Scoring and Leaderboard for Sport Events (March 11, 2023).

edit 2023-04-04: Bug fixed in v0.2, thanks @JonnyBurger and @PatrickH!

oh.. and, I might need your 🥺 help with a little 🐛 bug I encounter.

⁉️ Anyone knows where this flickering comes from? Reproduce as follows:

1. Add one heats to display
2. Remove the heat again
3. Wait for the screen to update. Can you see that flickering?

How can I fix that? I'm pretty new in that JavaScript business. If you know the fix, please shoot me a mail, ping me (see footer).

The bug should be in Leaderboard.js somewhere.. Thanks for any hints!

#coding #sports #myheats

I detected the following deficiencies which could be improved with a more digital approach (digital/mobile from the start):

• Mistakes can occur while copying ratings and numbers from paper into Excel
• Sorting each Excel list (for every competition and run) manually is error prone, especially, with multiple competitions going on simultaneously (slopestyle ski or snowboard, formation skiing, men, women, several runs, etc.)
• The results need to be printed on paper and published on the website (PDF)
• Formatting and printing these sheets (for each competition) takes quite some time and the result is not always consistent (in terms of formatting)
• There are no live results. This is also not convenient for the athletes that want to know right after the run how they scored and how they rank in the competition. Ideally, the athletes get to know their scores right after they cross the finish line.
• OneDrive syncing did not always work reliably (depending on the end users devices) and mailing the sheets was a pain

I was looking into some existing solutions for systems to process the data, such as liveheats. However, since most of these systems are finished products and there is no open source code available that I know of, I decided to quickly draft my own version of a live leaderboard for these kind of sport competitions.

🚀 Demo instance: https://myheats.p0c.ch

🧬 Code: https://code.in0rdr.ch/myheats

Right now, there is only the leaderboard which automatically updates as soon as new data arrives in Supabase. During the process of creating this first draft, I became a huge fan of Supabase because it works really well. It is the open source Firebase alternative with Postgres database in the backend. I can highly recommend it for your next project, because it is extremely easy to get started with.

For the purpose of the leaderboard, I was especially interested in the realtime aspects of Supabase. This allows me to update the table as soon as new data is entered in the backend (by the judges of the comptition).

I'm planning to update the code with some more features soonish, among others:

• Authenticaiton for the experts that perform the ranking and rating
• A very simple user-interface or view for the experts to edit the score for a single athlete of a heat or run
• Better import/export functionality for start list and rankings

Stay tuned. If you have some input or tips feel free to drop me a line (see footer).