Arrr, ’tis true what ye say. In this age of Artificial Intelligence and large language models, ’tis important that we share our learnings and explorations with fellow scalawags for innovation.
We hope Evidi releases the Kraken of Nvidia image generation prompting… and ye’d best keep that shenanigan within pirate domains!
When harnessing tha powers of prompting, we keep our sample API requests tucked away in a Postman collection. Easy to use, easy to share! #ShareAlike, me hearties! #Sharin’BeCarrin’!
Today we raise the Jolly Roger high in celebration of our fellow pirate crew, Evidi Sabeltanns, who have once again made their mark on the high seas of the hackathon battle. Despite the fact that our own crew may not have been the best in the competition, we still have reason to be proud of our pirate brothers and sisters. 😉
So, let us celebrate their victory and raise a cheer for our fellow pirate crew.
I should also say As pirates, we are often depicted as ruthless, heartless individuals who stop at nothing to achieve our goals. But One of our pirate members recently showed that even the toughest of pirates can have a heart of gold. our Captain, helped a group of enemy pirates, The Bastards, by providing them with a battery for their ship, which had run aground and was unable to set sail 😉
10 years ago, the year is 2013. Barack Obama is president, Donald Trump is a reality TV star, no one has heard about Covid-19 or Microsoft 365, and jQuery 1.10.0 gets released to much fanfare! With so many improvements from the previous versions, this is clearly the future of web development and leaves heads spinning in excitement everywhere.
Speaking of spinning heads…
This little easter egg brings us back to a simpler time when we were allowed to enjoy the little things in web development.
We have used the oldest (and stable) jQuery version available from Microsoft’s Ajax CDN (jQuery 1.10.0), and embedded it to the Power Page HTMLpage.
A super simple function adds a class to div containing the profile picture on click, and CSS makes the image spin. Just like our heads.
During the last 24 hours, we have all learned to love the magic of Power Pages.
But with some custom CSS and a webpage instead of a modal window, we can change the dour and uninspiring look from the standard out of the box “I work in corporate accounting”-look.
Change from a modal window:
To a nice, classical scorecard for all our important pirate skills, just like the ones we got from school back in the 80s
The dread pirate Gaute is good at sailing but sucks at fighting.
As for displaying the form values as columns, if it is stupid but it works…
Colors are an important part of the User Experience, however there are more to design than colors. Let us dig deeper into our color pallet for this app.
UI Color Swatches with descriptions for use from the UI design tool Figma.
Our Swagger of Cloth Sebastian has shown us some tricks of the trade. Where other teams have opted for machine learning to create their color template, Sebastian has chosen for Adobe Color – a tool for mixing beautiful color pallets.
Screenshot from Adobe Color
The pallet was mixed using our Captain Mats’ favorite color: Blood red (or a slightly rusted maroon if you like) as the base. Then for electric flair we skewed the color pallet using Analogous color harmony towards the violet spectrum. Since the maroon is quite soft this results in a calm nautical palate with some poppy vibes towards pink and green.
Building on the swatches we made de-saturated versions to help with shading and possible scenarios where we might need less color to achieve more in the design. Typical places would be illustrations and clustered sections that need soft, mellow containers.
Implementing the Colors into a UI
Adding the colors as swatches to Figma’s color management makes et easier to try different colors and alter the colors if needed. We also named the colors with logical names, describing how they should be used rather than descriptive. Form experience and also rooted in best practise we find this way of managing colors more versatile and easier to work with than having explicit names, like “blue-bg-color” because what happens when your token has a descriptive name, and that description is no longer correct? You need to defector or just remember, both options are bad for speed,
Screenshot from Figma’s color swatch styles
Lastly it is important to calibrate your colors for the visually impaired. One common tool is the WCAG color contrast guidelines requiring contrasts of 1:4.5 for normal text and 1:3 for large text. Sadly we can see our selected pallet is not optimal for all cases and still needs work.
WCAG compliance check for the color swatches against the darkest and lightest color in the pallet
Also, the resident pixel pusher is very happy he has to hack all this together on a broken screen where everything looks janky. We are so bold to say this is living like a true swashbuckler, powering through this hackathon.
The harbor master is a social character needing to speak to as many pirates as possible and in general handle most day-to-day issues at the dock. This means that he is not always in front of his computer and is capable of receiving information on what is happening with the voyages.
Ship ready to leave
When the captain has received his crew from the harbor master and the voyage is ready to leave, the captain closes the voyage and the speakers in the harbor sound out a sweet farewell on the SONOS 🎵Reidar reiser snart🎵.
As part of our solution we are developing a Teams App for staffing raids, which uses an Azure Function App to get dataverse data. The toolchain setup for doing this consists of Visual Studio Code, Azure Devops Pipelines and Azure Services.
To speed up our delivery we have implemented a CI/CD pipeline that deploys the infrastructure and backend code to an Azure Function App. The process works like this
We develop a new feature with Visual Studio Code
We push the feature to the main branch
The Azure pipeline is triggered and executes two stages
Build stage
The .NET code is built as a deployable zip
Dev stage
Then infrastructure is deployed with Azure Bicep
The zip is deployed to the newly created Azure Function App
We have modularized the stage jobs in templates, so we only need 9 lines of code to add another environment to our application.
To deploy our infrastructure with Bicep we use a Devops Service Connection to authorize operations with the Azure CLI.
Take a look at line 49 – here we read the output variables from the Bicep deployment in order to retrieve the name of the function app. We later retrieve and use this Devops pipeline variable in the job that deploys the code to the Azure Function App.
The infrastructure is defined in the .bicep file above which also utilizes other Bicep modules. In order to avoid explicitly including secrets we feed it from a Azure Key Vault. A link to the Key Vault Secret is passed to the Azure az group create command in a json file.
We deploy a frontend-app as well. The build is made and artifacts are created for the spfx-app and for the teams-manifest. We then have a release pipelines that utilize npm and m365 cli for deploying the app to the sharepoint app catalog and to Teams. The scripts are written with powershell.
For now it only displays basic pirate data from Dataverse
UI is very important for end-user experience. It can give the users positive feedback when doing something good, and therefore give them a feeling of accomplishment. What about taking it to the next level, and providing audio elements as well when you complete a cool task/raid etc.
This is why we have teamed together with many of the ACDC pirates to bring happy vibes to the community. We have a Raspberry Pi that we have connected to the internet and our SONOS speaker. We are providing all of the teams a unique webhook that they can call whenever they want, and the song of their choice will play:)
We will be offering this service to all teams, so they can have some fun with sound when the do someting.
First, we downloaded a clip from youtube and extracted the .mp3 file
Edited the mp3 file to a short sequence
Uploaded the file to the Raspberry PI
Created a Webhook in Raspberry PI that is unique for AXData that plays Jack Sparrow
A good long sleep is really important, especially when you are sailing the high seas all year round 🙂 Though, the Orange Bandits believe that the early bird always gets the worm 😉
It’s freaking cold!Morning glory indeed 😛Enjoying the morning glory moments
