Forem: Jocke Sjölin

The Power Platform – An Introduction for Beginners

Jocke Sjölin — Sun, 05 Oct 2025 12:59:49 +0000

Many businesses take a chaotic approach to managing daily operations: a mixture of spreadsheets, apps and manual tasks. What if instead there was an all-encompassing suite of tools out there for taking care of most of your business needs? The good news is that there is in fact something like that, and it's called the Microsoft Power Platform.

It lets you automate, analyze and build custom solutions for your business without writing a single line of code. It's far from a fringe-product, instead you'll be joining the majority of Fortune 500 companies in using a highly developed and widely supported platform.

What is the Power Platform and what are its benefits?

The Microsoft Power Platform is a collection of low-code tools and products that each serve a specific purpose, such as analyzing and presenting data, building custom business apps and websites, setting up automated workflows, and even designing AI-powered chatbots.

The Power Platform was created with non-technical as much as technical users in mind, and it aims to be useful even to people who don’t “know how to code” in the traditional sense. This can act as a great equalizer in many organizations, allowing non-developers (those involved in specific processes, such as field technicians) to directly implement their own solutions, rather than rely on the interpretation of specialized developers to be accurate. Cutting out the middleman, so to speak. After all, most people tend to know best that which they do every day.

The Power Platform is not an isolated system, but is instead an integral part of the wider Microsoft ecosystem, offering full integration with Teams, Dynamics 365, and Azure among others. Power Platform products can also be connected to several third-party services like GitHub, Slack, and Salesforce.

The Power Platform is not completely devoid of code, however. Instead it relies on Microsoft’s low-code programming language, Power Fx, to express logic. But don’t worry, Power Fx is still much easier to both learn and understand compared to traditional programming languages.

Products in the Power Platform

Power BI: All about analyzing and visualizing data using charts, graphs, dashboards and more. This process can help generate insights that support better business decisions.
Power Apps: Create custom business apps using low-code tools. Web and mobile apps that solve specific problems can often be put together quickly by simply combining the right ready-made components.
Power Pages: Similar to Power Apps, but the end result is custom, data-driven business websites. These tend to be external-facing (customer portals, partner hubs, etc.) compared to the more internal-facing nature of Power Apps.
Power Automate: A tool focused on processes and interactions between services — both Microsoft-owned and third-party. Perfect for automating repetitive tasks like sending an email to the right department after an invoice is paid.
Copilot Studio: (formerly Power Virtual Agents): low-code platform for building custom AI chatbots and copilots (agents) that can be connected with Dataverse, external APIs and Microsoft 365 apps.

Together, these products make up a powerful (no pun intended) toolbox for solving a wide array of business problems or just vastly improving processes that are already in place.

Dataverse: one Database to Connect them all

Dataverse is arguably the most important part of Power Platform, but its role is more of a supportive one for the other services in the suite rather than a standalone product. It's a relational database engine designed to be shared and connected not just to other Microsoft platforms but to external ones as well. Here you can store important business data like customer, product and sales records or any custom data your business needs to record.

This data is stored in tables which can then be accessed by the other Power Platform services: Power Apps, Power Automate, Power Bi and Power Pages. Of course, every solution you design using these tools probably don't need access to all the data in your Dataverse - you can choose which tables to work with and ignore the rest. As a part of the Power Platform, Dataverse runs on Azure behind the scenes.

The DOM Explained: Where Markup Meets JavaScript

Jocke Sjölin — Thu, 04 Sep 2025 07:03:01 +0000

If you're a web developer, chances are you've at least heard of the DOM - Document Object Model. It might, however, be nothing more than an abstract concept at the back of your mind, yearning for clarification. That is what this article is hoping to achieve. So, on to the burning question: what exactly is the Document Object Model?

Well, at the highest level and as the name implies it's a way of representing a document (usually HTML or XML) as a model consisting of objects (also called nodes). The nodes are organized in a hierarchical tree structure, with the document itself at the root, followed by the <html> element which is in turn followed by top-level elements such as <head> and <body>.

But, elements can also have inner text and attributes like src and href. These are also represented as nodes belonging to their respective parent elements.

The 5 types of nodes

Document: the root of the DOM tree that represents the web page as a whole. Corresponds to the document object in JavaScript.
Element: represents the HTML elements such as <div>, <h1> and <p> that make up the building blocks of the page. Corresponds to their respective element names in JavaScript but are often manipulated using their id or class attributes.
Text: represents text inside elements, such as <p>Hello</p>, where "Hello" is a text node belonging to the <p> element node. Text nodes are always leaf nodes, meaning they have no child nodes / attributes of their own. Can be accessed using element.innerText in JavaScript.
Attribute: represents attributes of elements (like aforementioned class and id). Are usually accessed as properties of elements (element.href for example) rather than as direct nodes.
Comment: represents HTML comments () that are not visible on the page but still part of the DOM tree. There is rarely a need to access these through JavaScript.

The purpose of the DOM

So, with what the DOM is and the different types of nodes out of the way, let's move on to the topic of what the DOM actually is used for. Its main function is to act as a sort of bridge or interface between the page content (HTML, CSS) and programming languages (most commonly JavaScript), allowing the programming language to manipulate the nodes in the DOM.

These changes are then reflected in the HTML when the page is re-rendered by the browser. This allows for content to be changed dynamically, such as adding items to a list or clicking a button to change the background color of an element.

Without this mechanism in place all content would have to be loaded statically from the server, with all "dynamic" updates being communicated through form submissions or similar, only then for everything to be fully re-rendered by the server.

This is pretty much how the web worked in its infancy, with the DOM since then having become one of the most major foundations of the modern web.

Real-world examples of manipulating the DOM

The main way developers interact with the DOM is with a programming language, usually JavaScript. This is done using the document object, which represents the whole web page in JavaScript (the document object is itself part of the window object which represents the browser's window). The document object allows us to access JavaScript's DOM methods for adding, removing and modifying existing nodes.

Modifying an element

To modify an element, we first have to find it, something which is most easily done using document.getElementById(id), a method that finds a single element using its id attribute. We can also find collections of elements using document.getElementsByClassName("<class>") or document.getElementsByTagName("<tag>").

These methods return HTMLCollection objects, which are array-like lists of elements that will have to be looped through in some way in order to be modified. Another perhaps more straightforward approach is using the newer querySelector method, which returns the first element that matches a specific query (CSS selector):

const linkElement = document.querySelector("#linkElement");

This makes it possible to use the same method regardless if we're matching by id, tag name or class name. As mentioned this method only returns the first match, while a related method, document.querySelectorAll(".class"), returns all matches.

Regardless of method used, once we have an element identified, we are now able to change its inner content, attributes and style properties. Here are some examples of modifying an already existing element in the DOM tree.

const linkElement = document.querySelector(#linkElement);

linkElement.innerText = "Now my text is updated.";

linkElement.innerHTML = "<p>Now my innerHTML consists of a paragraph element with text.</p>";

linkElement.href = "Now I'm pointing at a new destination!";

linkElement.style.backgroundColor = "red"; // Now my background color is red

Creating an element

To create a new element we use the following method: document.createElement("element"). This method takes as an argument the type of element to create, such as h1, p, or div. However, simply creating the element is not enough, it's also necessary to define its location in the DOM tree.

Before this step, the element still exists in memory and can be manipulated like other elements, but it's not part of the DOM. To fix this and make it visible to the user, we have to append it to an already existing element. For example, if we have an unordered list, <ui>, we can create list items, <li> programmatically and append them to the <ul>:

// Select the unordered list element
const ul = document.querySelector(\#list); 

// Create a list item element
const li1 = document.createElement("li");  

// Set the innerText of the list item element
li1.innerText = "I'm a list item"; 

// Append the list item element to the unordered list
ul.appendChild(li1);

If it's more of a stand-alone element, however, the created element can simply be appended to the <body> element. It's also possible to append "invisible" elements like <script> to the <head> or <body> elements, but it's not recommended to append directly to the <html> element, since this is supposed to only have <head> and <body> elements as its children.

Removing an element

Just like when modifying an element, removing an element also requires first retrieving it in the DOM. This is done in the same way, either using document.getElementById or by using querySelector. Once the element has been found, running element.remove takes care of the rest.

To remove multiple elements at once, such as those sharing the same class, the elements have to be retrieved as a HTMLCollection or NodeList and looped through, running the remove function on each item:

const items = document.querySelectorAll(".remove-me");

items.forEach(item => item.remove());

It's also possible to set the innerHTML attribute of an element to an empty string, but this will remove everything inside the element:

const container = document.getElementById("demo");

container.innerHTML = ""; // clears all child elements

In a similar fashion, replaceChildren() can also be used to clear the contents of an element (by simply replacing its children with nothing):

const container = document.getElementById("demo");

container.replaceChildren(); // removes all children

How to skip the heavy lifting

In addition to the methods of interacting with the DOM using vanilla JavaScript presented in this section, there are also many other libraries and frameworks that have more convenient, built-in ways of accomplishing the same things.

One example is jQuery, which was created to simplify DOM manipulation across browsers:

// Select elements and change text
$(".item").text("Updated text");

// Add a new element
$("#list").append("<li>New item</li>");

// Hide elements with animation
$(".alert").fadeOut();

Another is React, which does not directly manipulate the DOM but instead uses a virtual DOM in order to only update the real DOM where new changes have been detected.

function App() {

  const [count, setCount] = React.useState(0);

  return (
    <div>

      <p>You clicked {count} times</p>

      <button onClick={() => setCount(count + 1)}>Click me</button>

    </div>
  );
}

Here, the p element is the only component that is re-rendered when the count state changes (when the button is clicked).

Conclusion

To wrap things up, we've learned about the tree structure of the DOM, the 5 different types of nodes, why the DOM exists in the first place, how to modify, create and remove nodes in the DOM and finally how frameworks and libraries can simplify interacting with the DOM, making our developer lives a little easier. Happy coding and try to avoid DOMscrolling!

React + Vite Setup Guide (Quickstart)

Jocke Sjölin — Sun, 24 Aug 2025 05:11:37 +0000

When a build tool is named after the French word for "fast" (not the hunger-related kind), you can assume it's designed for one thing and one thing only: deploying projects as quickly and efficiently as possible. This is exactly what Vite is about, and it can be used not just with React but with other frameworks and tools like Vue, Svelte and even plain old vanilla JavaScript.

It works by running a super-fast development server using native ES modules in the browser, which means no heavy bundling during development and changes being reflected almost instantly. When it's time to put that sweet code into production, Vite uses Rollup to bundle and optimize it.

Step 1: Create Your Vite + React Project

To create a new React project using Vite, the easiest way is to use the command line. Simply go to the folder where you want the project to be located and run:

npm create vite@latest my-react-app -- --template react

This creates the boilerplate code and basic structure for your React project, such as the public and src folders, README and configuration files.

Step 2: Install the Right Dependencies

Creating a new project only creates a list of dependencies and packages the project uses (in package.json), it doesn't actually install them. For this crucial step to occur, you need to navigate to the folder of your newly created project:

cd my-react-app

and run:

npm install

This will install all the dependencies, sub-dependencies and packages required for the project to work (as listed in package.json) into the node_modules folder.

Step 3: Run the Dev Server 🚦

With the foundation firmly in place, you're probably eager to see the React app in action and perhaps make some changes of your own. I hear you, and doing this simply required getting the development server up and running with the following command:

npm run dev

Give it a few seconds, and the server should now be listening on http://localhost:5173/ (default as of this writing). Going to this address in the browser takes you to the "front page" of your project, which at this point mostly consists of the animated logos for Vite and React, as well as a clickable button demonstrating how to use state by incrementing its value with every click.

Step 4: Explore & Tweak Your Project Files

But you now have the power to change this and build something more interesting! To get started, open the project in VS Code or another IDE and start inspecting the project structure. The starter template is located in src/App.jsx and this is where you can make changes that are in most cases reflected on the website as soon as you change the code and save.

A simple yet predictable way is to add your own name to a <h1> or <p> tag, but you can probably come up with something more interesting than that! You at least now have a good starting point for building your very own React app. Another suggested approach is to go do some beginner tutorials (perhaps over at freeCodeCamp or W3Schools), then add the different components you build there to this project.

That gives you the opportunity to both have a library of components that you can edit as much as you want, and learn more about how everything interacts with each other. And finally, if you ever need a break from Vite and React (unlikely but possible) or just want to free up some RAM, Ctrl + C stops the server as easily as npm run dev starts it.

How to build a mobile weather app in React Native (part 1)

Jocke Sjölin — Tue, 19 Aug 2025 08:36:43 +0000

Building a mobile app can be hard, especially without much prior experience. First you have to come up with an idea that fulfills certain criteria:

Is neither too easy nor too hard to make it worthwhile given your current skills.
Is "fun" to work on: the idea should ideally solve a problem or improve your life in a personal area of interest.
Is (somewhat) original: it doesn't have to be completely unique but should at least provide some new twist or perspective to an existing concept.

In addition to these things, there are also technical considerations to take into account. As of 2025, some of these are:

Do I build a fully native app (Swift for iOS, Kotlin for Android)?
Do I use a cross-platform framework like React Native, Flutter or Xamarin?
Do I simply vibe code the whole thing using one of the many AI tools out there?

My motivation and how I picked a tech stack

I know, I know, a weather app is just as cliche and unoriginal as a to-do list or calculator when getting familiar with a new programming language or tech stack. But there was one thing that had always bothered me with most weather apps - the clutter. For the most part when I'm checking the weather on my phone I only care about how it will change in the course of the day at my current location.

I don't need an overload of data points and graphs for the next several weeks in order to make an informed decision about how to get dressed in the morning. So, I decided that the focus of my weather app was going to be simplicity, specifically to present the user with the current day's weather forecast for their current location.

Sketching out the user interface

To realize my "vision", I started by broadly sketching out the user interface. The original plan was to display each of the 24 hours in a day using a card, in the following way:

As you can see, each card displays the hour along with the weather conditions and temperature. When the user starts or refreshes the app, the current hour is highlighted in a contrasting color to the rest of the cards, and the view scrolls to keep the current hour in focus.

Starting with mock data

To see my UI in action, I decided to build out a basic version using mock data. The long-term plan was of course to fetch live data from a weather API, but I wanted to have something tangible up and running before then. The mock data consisted of any array of objects following the same format as outlined above.

{ hour: '05:00', temperature: 10, weather: 'Cloudy' }

With the mock data firmly in place, it was easy to set up the UI using a ScrollView:

<ScrollView ref={scrollViewRef} contentContainerStyle={styles.innerScrollView}> <View style={styles.weatherContainer}> {loading ? ( <View style={styles.loadingContainer}> <ActivityIndicator size="large" color="#F5D547" /> </View> ) : ( forecast.map((weatherGroup: {startHour: string, endHour: string, weather: string, minTemp: string, maxTemp: string, icon: string}, index: number) => ( createWeatherCard(weatherGroup, index) )) )} </View> </ScrollView>

Merging the weather data and modifying the UI

The end result looked OK, but it still felt a little cluttered: there were simply too many weather cards presented to the user at any one time. To remedy this, I decided to merge weather cards if they met all of the following conditions:

Adjacent hours (00:00 and 01:00, 17:00 and 18:00 etc)
Temperature difference (no more or less than 5 degrees difference from the lowest and highest temperature of the current group. For example, a temperature of 15*C and 21*C would result in two separate groups, but not 15*C and 20*C.
The same weather type (clear, cloudy, sunny etc)

This process significantly cut down the number of weather cards displayed on the screen, unless each hour has its own unique weather type (which is very rare).

The updated UI now looks like this:

We now have a basic yet functional weather app, with one major issue: the weather data is hardcoded into the index.tsx file, meaning it always stays the same and making the app essentially useless apart from admiring the pretty UI. That is why the next part in this mini-series will cover how to fetch weather data from an API, handling an API key and dealing with the fetched data asynchronously.