Author Archives: INtendo DS

🤖 Automatically Priming our SPA cannons with React and .NET ⛵️

Posted on by

Sailing is though, so you need to rigg your ship to your advantage, preferably automating your sales and having people walk the plank for making bad code. We chose to created a project with ASP.NET Core application running with React.js. The application is running on .NET version 7 and uses several technologies, both hip and retro.

Screen capture of the .net SPA application setup

Mapbox for Charting the Seven Seas

Our application uses Mapbox – a provider of custom online maps for websites and applications. The company provides APIs and SDKs to create custom maps, add markers and other map controls, and to handle user interaction with maps. This ease of use and their clean and well-structured documentation (docs.mapbox.com) made Mapbox our top dog for create, edit and manipulate maps in our service.

Map created using Mapbox’s API

Protecting your Shared Booty form the Crew

Any pirate needs a secure lair, a pirate code and ability to help other pirates in need. For this reason we created a repository in GitHub and implemented best practices for collaborating as developers, like proper branching, build pipelines, linting and pre-deploy checks. Like blocking ourselves from bloat because we can’t have unused code in the repository.

Snipet showing lint error for unused variable

Branching Strategy for Division and Conquering

The master branch contains the production code. All development code is merged from develop into master. Cutting corners in true hacker style we opted to not use feature branches, since, to be frank, the entire thing is a feature at this point.

What we all said when discussing feature branches

All branches are protected with protection rules. Due to the limited size of the project we can automatically merge features and bug branches directly to develop, but we can’t push directly to develop. Even that is too risky for this group of mad lags and girl. If you want to merge code from develop into master you need approval from at leaste one other developer and no changes requested to your merge, if all flags are green Github forcefully collides the code together and see what sticks (it’s actually more sophisticated than this, but you Judges know a lot more about this than we ever will, so we humbly just call it “magic” – just like magnets).

Parchment showing the Law of Protection for our Master Branch

Feel free to have a gander at our code repository to appreciate all the shiny details: github.com/TommyBakkenMydland/CaptaIN-Hack-Sparrow

Smooth Rigging with CI/CD and Github Actions

Github Actions is a now a CI/CD platform that allows developers to automate their software development workflows. This, for us, is a huge win because we want to do as little configuration as possible!

CI/CD github actions

The actions reduce the time and effort required for manual processes and enables us to release new features and bug fixes quickly and confidently – Harr harr, got you matey, you thought we will fix bugs! … But … for the sake of argument … if we were to fix bugs, this powerful tool for streamlining development workflows, enables us to deliver high-quality software more efficiently and effectively at lower cost – Better use of time, reduce waste of time (WoT) and better business value for the client. We used yaml to tell what GitHub actions should create:

Yaml file describing what GitHub actions should create

Creating Overly Complex Gadgets to Avoid Simple Tasks
(aka How we used ChatGTP to give us documentation on Pulumi)

Nobody likes to know stuff. Everyone loves AI. What about AI that knows stuff?! Sold!! We used the AI service to provide us with documentation on how to deploy infrastructure in Azure with code.

Asking the oracle about stuff we probably already should know

From this we were able to write code that could be executed in our CI/CD

Pulumi snippet for creating our environment: Infrastructure as code #retro

Resulting in a beautiful environment and ample time for coffee ☕️

Screen grab showing the employed resources in Azure
Screen grab showing ChatGTP making a meme about making memes about using ChatGTP. Very meta.
Mame created from ChatGPD’s instructions

Make the Deck Shine Like Pixels

Posted on by

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.

Broken screen is broken

Up Before Dawn

Posted on by

We are claiming the badge Morning Glory on behalf of Hlynur of Evide Pirateboys and our own team. Sebastian and Hlynur had and interesting discussions about Holo Lense and @in2 team did some mental health excursuses before planning.

Hlynur and Sebastian are very surprised to find each other _before_ 0600, this picture was taken after a long conversation about Holo Lense, Viva and the possible future of immersive UI that started 0550.

Solveig and Sebastian spent the morning working on Physical Health. Very important when you are seated days on working hard. Mind and body is one and as Judge Nick mentioned in hes Keynote: You need to look out for both body and mind when working hard.

Solveig ☀️ is cranking out some core exercises preparing for a long day ow hacking
Team spirit i high even tho the sun is low! Actually it hasn’t risen…

After the morning gym session the team met to discuss what we learned yesterday and prepare for todays event. We have mapped out a lot of our goals already and will synk after breakfast.

Team gathers for the first scrum and coffee before the day starts.
The full crew sets sail for breakfast after a productive morning!

Quick Tip: Best Practice when making reusable Figma Components

Posted on by

Figma, the hippest UI kid on the block, has a setting for components called “properties”. They are intended to mimic how we use properties in frameworks like React. However when working with multiple components and when swapping components they grant some extra value to the design process.

Updating multiple instances of the same component

Having properties for the values makes it easier to update multiple values though-out your design.

Remembering override values when swapping components

But more importantly, when using variations of a component the component remembers its override-values even when switching to a variant that does not have the same values in the component, making updating your design that much easier.

Just trust me on this, it’s the best practise

– Every Developer ever, and now also a designer

Sharing Trade with your Fellow Pirates: It’s a Non-Zero Sum Game

Posted on by

Sometime we all maneuver ourselves into bad waters. A zero sum game occurs when you are in waters with an advisory and there are only two options: Either you win the fight, sinking them. Or they win the fight, sinking you. A non-zero sum game however occurs when you both can be victories: There is enough booty for the both of you, and you are able carrying each-other to victory despite adversary.

The crew of @in1 and @in2 crack their skulls together to figure out how this ancient tech called Raspberry Pi and Arduino works. It all runs on flash circuitry, Python, hopes and prayers: Most retro tech there is tech there is.

Team Captain Mats (left) of @in2 and first Mate Håvard (right) of @in1 sharing thoughts on why the Raspberry Pi is not doing what it is supposed to do
Team Captain Øyvind of @in1 is sharing how they set up their Raspberry Pi

A fruitful relationship

The story of Innovations A-team and their First Team was a story of the cut thought battle between two packs of pirates in pristine physical and psychological shape. However after their first love affair over the Raspberry Pi, Captain Øystein asked Swagger of Cloth Sebastian for his input on how badges work. They shared a long and fruitful discussion and are now great allies in this non-zero sum game that is the Arctic Cloud Developer Challenge

Sebastian (left) of the @in2 and Øystein (right) of the @in1 working together to figure out how the Community Champion badge works. They laugh and have fun while sharing theories. Working theory is that they need to cooperate and have fun.
@in2 has put up a backlog to track badges. If anyone needs a visual representation, feel free to have a look.

The Skeleton Crews Skeleton Sketches: Hack Sparrows Architectural Treasure Map

Posted on by

When first presenting our idea, the Hack Sparrows shrouded it in mystery. A battle tactic as old as the kraken herself. In the words of Sun Tzu: Never let you enemy know your plan, at least if you have one. Which we most certainly have…

Initial sketch of what The Hack Sparrows wants to achieve.

The Traveling Pirate

Ever heard of the traveling salesman problem? It is a mathematical problem of route optimization: A salesman travels form A to B. In between he has many opportunities for trade. How can we optimize the route in terms of monetary value for the salesman: Which patch gives most bang for the buck, or most buck for the step?

The Bare Bones

We are no salesmen, we are pirates! And based on the presentation many of us are after the same treasures, leaving the best planned pirating rout the winner of pirates. The pirate king!

Our cleverly designed and thoroughly QA’d Architecture (do not double check) shows how we will use state of the (last century) art to enable better piracy.

System diagram showing what the user sees and what the system does. Proudly made with a thieved licenses from our employer. Yarr! (we have license, we just act like we stole them)

On the seven seas the captain has access to a web interface. This web interface uses a Function App to talk to two main services:

  • We data mine the Barenswatch.io service, which keeps track of all commercial vessels on the seven seas, including the Privateers. And store them in our Data Verse,
  • The Data Verse updates and stores the crawled data to keep track off ship movement, ongoing raids and opportunities (including flagging Privateers as hostile)

Outside the web interface we use tactile feedback systems powered by Arduino (or Our Raspberry Pi is we can get it working) to warn the user of dangers or opportunities.

Henrik creating the Data Verse tables for the power platform that will give power to platform, empowering the pirats to pirate commercial platform vessels

    Is a Sharing Economy Possible Amongst Pirates?

    Posted on by

    To give is to achieve. But to plunder is life. So said someone on the internet, sometime, maybe… So how can you combine the two? The answer is to declare every gift a war trinket. We are not sharing, we are reverse plundering.

    Behold, of our many victims, Herman from Pirate of the CrabIN:

    A Conversation with Herman from team Pirates of the CarabIN on borrowing, versus stealing versus being allowed to use our cables.

    The Seven Seas are Even More Dangerous with this Crew Sailing

    Posted on by

    You and your mates are standing, looking out over your stern you see a ship. This is when you spot an enemy ship! It looks totally out of control. Every hand on deck. And is that a volley ball!? Surely these pirates are more like jokerates… They are ripe for a plunder!

    His smooth voice is a thunder cracking the sound of the seven seas

    But then, you spot it. The stunning Captain Mats with his firm jaw, talking smooth orders. But even the smooth sound of his smooth voice is a thunder cracking the sound of the seven seas. These are no ordinary pirates. No ordinary buclkeneers. They are Swaggrates, the swaggiest of pirates. They are The Hack Sparrows!

    Meet the crew

    Hello ACDC! We are pleased to meet you all! We are one of the lucky teams to join from Innovation Norway this years. Meet the team:

    Mats, our captain with the chiseled Jaw and an expert in all things backend. He is a fan of the posterior for sure. When not creating the machines of eave that lurks in you server cabinet, he enjoys geting his sea legs moving on the dance floor. You will be surprised by the trick this man can achieve when given enough rum.

    Solveig, our lady with a mind as sharp as daggers. Solveig does our AI and is the brain of the bunch. Also she is a 6b+ boulder and knows a thing or two about climbing masts and attaching from above with carefully planned accuracy. She also loves to bake and covers every room she enters with the pleacent cent of vanilla and cinnamon.

    Henrik is our silent killer that works in the shadow realm of Office 365. He can create systems that furfill your life or trap you in perpetual torment. He also enjoy using his thunder legs to punt footballs through the horizon.

    Tommy, our knower of every arm and resident full-stack. He knows how to choose the right weapon for the right attack, or counter attack. Other Pirates, look out! When not picking the right weapons for the seven seas hi spend his time among the turtles in perfect harmony, diving off the coast and snorkeling when on vacation.

    Sebastian, our esthetical eye in the sky and swagger of cloth is responsible for making things pretty. But unknown to many, he deploys deadly tactics such as UX, design psychology and intuitive design to fool you into his traps, stealing all your coin! When not making things pretty he likes to snowboard down mountains, preferably those at edges any of the seven seas.

    We are looking forward to work with you all in this tiny ocean that is Sorsalen-konferansesal at Soria Moria! Yarrrr!