DEV Community: Eli H. Schei

How to upgrade your SPfx project to the latest version, and how to fix/avoid common issues

Eli H. Schei — Fri, 12 May 2023 07:29:30 +0000

Recently I had to upgrade an older project to the newest version of SPfx, and even though there are some great tools to help you on your way you typically run into some errors anyway.

How to upgrade your project

You could try to just upgrade the SPfx packages that are listed in package.json. But these might have other dependencies that should also be updated and their packages might have dependencies… and so on.

So instead I reccomend that you use Microsoft 365 CLI to generate a report that tells you exactly what to upgrade.

Install Microsoft 365 CLI

npm i -g @pnp/cli-microsoft365

Use the project upgrade command to get a upgrade-report for your project

m365 spfx project upgrade --toVersion 1.14.0 --output md > "upgrade-report.md"
The above command will generate a markdown file with the name “upgrade-report”, and this will have a list of all the steps you need to take to upgrade your project.

Common errors and how to fix them (or avoid them)

Even though you follow the report you migh encounter some issues when trying to build your solution afterwards.

1. Check for duplicate dev-dependencies

Even though these are strictly speaking different npm packages you should only have on of them listed as a dependency or they might “get in each others way”. Check the upgrade report for wich version you should use. For me it was "...compiler-3.9": "0.4.47". So I removed the other one.

2. Delete node_modules, and package-lock.json

To be sure there aren’t any old versions hanging around delete both your node_modules folder and the package-lock.json file and run npm install.

You can try npm dedupe before deleting node_modules and package-lock. This might solve any issues related to old versions – thanks to Waldek Mastykarz for mentioning this on twitter

3. Deprecated tslint rules

You might need to remove some tslint rules that are no longer valid. The error message will tell you witch rule you need to remove. For me it was the member-access rule.
Error - [tslint] The 'member-access' rule threw an error ...

4. JavaScript heap out of memory

In my case, since this had something to do with tslint I think what probably solved it was removing the duplicate dependency as shown in the above section. But through my travels in google searches this showed up in multiple issues over differnt versions of SPfx – so I thought I should mention it.

If you have done the above steps and still gets this error it might be because the task needs more memory to run, so you can try fixing it by setting the --max_old_space_sice to a higher value.
gulp bundle --max_old_space_size=8192 --ship

Summary

In short the steps you shuld take to upgrade your solution is

Run the M365 CLI project upgrade command
Do all the steps from the report that is generated
Check packacke.json for duplicate dev-dependencies
Try running npm dedupe
Delete node_modules and package-lock.json, and then run npm install.
If you get an error on deprecated tslint rules – delete the rules from the tslint file
If you get an JavaScript heap out of memory error – try adding more memory to the task with
--max_old_space_size=8192

What is a Microsoft 365 Developer, and how to get started

Eli H. Schei — Mon, 20 Jun 2022 12:01:44 +0000

Often, when I talk to other developers – outside of the the “Microsoft 365 sphere”, they have no idea what it means to be a “Microsoft 365 Developer”. So I thought I should write about it and try to give an overview of what we do.

What does it mean to be a Microsoft 365 Developer?

In a lot of aspects – its just like being any other type of developer. You write code, you create things, you use source control, you deploy stuff and so on. Where it differst from ‘regular development’ is that where you typically have a stack of technologies that you use to build a webiste or app of some sort from scratch - in Microsoft 365 you work with a lot of different products which all can be used as is. And the main task of the developer is to extend/build on top of the exisiting capabilites of these products.

What even is Microsoft 365?

If you are brand new to this area you might not have a clear picture of what Microsoft 365 is, so lets start there. Microsoft 365 (M365) is Microsofts productivity cloud. It is a collection of tools that you can use to work and collaborate with your colleagues. It includes the Office suite (Word, Excel, Power point), OneDrive, SharePoint and Teams.

And then there is Power Platform, which is in the same sphere as M365, but still a little on its own. And then there is a logical connection from Power Platform to Dynamics 365.

And of course there is Azure – with Azure AD, and app registrations that play a big part in M365 development. To make it more confusing there are different development lifecycles and tools for a lot of these different products.

So what do a Microsoft 365 developer typically do?

Work patterns and workflows will differ between companies – so even though a lot of companies use the same (M365) tools – they might want to use them differently. Thats why Microsoft supports all kinds of different ways to extend M365. It is possible to build custom apps that give you total control of the user experience, or you can extend existing functionallity with smaller changes/extensions.

As I mentioned previously we typically “extend the capabilities of the products in the Microsoft 365 sphere”, or add new capabilites. Or we create the links between different M365 products so they can ‘talk to each other’.

How can you build on top of Microsoft 365?

So this is where it gets fun – and also kind of overwhelming.

SharePoint webparts, Teams apps, Teams extensions, Teams bots, SPfx apps, SPfx extensions, Office add ins, Power Apps (no code/low code), PCF components….. you might have heard of all of these, some of them, or none of them. As mentioned there are a lot of ways to build on top of Microsoft 365 and I’ll try to give you a simplified overview.

To do this lets divide Microsoft 365 into four main developer areas: SharePoint Online, Teams, Power Platform and Office.

SharePoint Online

SharePoint is a collaboration tool that offers a simple way to create pages, lists and work on documents together. It is often used as an intranet solution, where you can find internal news, tools and documentation.

There are different ways to extend SharePoint. You can crete webparts (apps) and you can create extensions. You can use the same framwork for these, and that is SharePoint Framework – also called SPfx for short. SPfx is a framwork for client side SharePoint development, and it uses JavaScript/TypeScript and React. There are tools and examples that will show you how to use something other than React if you prefer.

Teams

Most people think of Teams as a meeting and chat tool – which is not wrong – but Teams is actually built on top of SharePoint as a collaboration tool - an easy way to work in teams and share documents, tasks etc.

From a developer perspective – how do you extend Teams? You can build apps, embed a webpage in a Teams tab, create conversational bots to solve different tasks, you can create message extensions, or collect user input with something that’s called ‘task modules‘ (wich is basically pop-ups/modals). And you can connect to different services using webhooks or Office 365 connectors.

You can actually use SharePoint Framework to build apps for Teams, or you can use the Teams toolkit. The toolkit also supports development in .NET if you are more comfortable backend.

Power Platform

Power Apps

Power apps is itself a tool for creating apps. It provides an easy no-code/low-code drag and drop solution to build apps. But you also have Power Apps Component framework that lets you create your own component that can be used inside a power app. These components can also be used inside Dynamics 365.

Power automate

Power automate is a service to help you create workflows. This is also a low-code solution where you can drag and drop different steps together to create your flow. This is an easy way to get the different parts of M365 talking together.

Office

Most people use the office suite and never conciders that it can be extended with add-ins. An Office add-in is almost like a miniature webapp that embedded in the office clients.

Azure

Ok, so Azure is strictly speaking not a part of Microsoft 365, but as a Microsoft 365 developer you should still be familiar with some parts of it. The most important part (from a M365 developer perspective) is Azure App registrations which we use to grant the apps/extensions access to resources. Azure functions are also very useful, but in my personal definition of M365 Development I don’t consider Azure Functions part of it so I won’t cover that here.

Microsoft Graph

Another tool you should know about if you want to get started with Microsoft 365 Development is Microsoft Graph. This is an API that you can use to get information from different parts of M365. This can be current user, documents, list elements and so on. You can also use it to edit/add information, upload files ++.

How to get started as a Microsoft 365 developer?

First you should sign up for the Microsoft 365 Developer program. It is free and it will give you access to your own M365 developer tenant that you can use to test the apps/extensions that you build.

When working with Power Apps you also need to get the Power Apps developer plan (this is also free).

And from there - start by following some guides/tutorials and just jump into it. I’ve added a lot of links to different resources in the previous sections, but I’ll also add a list of links in the end of this blogpost.

Frontend or backend

A lot of the M365 developer toolkits are offered for both .NET and JavaScript/TypeScript, but you don’t always have a choice. The best is probably to be comfortable in both worlds.

In my experience a lot of the M365 development are now client-side focused, and you can almost always find an example on how to do something in JavaScript/TypeScript. But since I’m a frontend developer I haven’t really looked for that many backend resources - so there might be many out there. I can only speak from my own experience and I will always choose TypeScript (or JavaScript) if I can – but I know enough C#/.NET to do small simple things if I absolutely have to. And that combination of skills works great for me.

Resources

I've previusly written a blogpost "A collection of resources for Microsoft 365 Developers" so take a look at that too. But here are some good resources if you are completely new to this area of development.

Introduction to the Microsoft 365 Developer program (youtube video)
Microsoft 365 Developer program
Extend Microsoft 365 – Fundamental (Microsoft Learn module)
Introduction to SharePoint Framwork (Microsoft docs)
Get started building Microsoft Teams apps (youtube course)
My previous blogposts about Teams development
My previous blogposts about SharePoint development
A comprehensive guide to PCF components

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. 🙂

Thank you for reading!

/Eli

Upload files to SharePoint with JavaScript using Microsoft Graph and Microsoft Authentication Library

Eli H. Schei — Tue, 23 Nov 2021 09:00:28 +0000

Phu, thats a long title - but I wanted to make it really clear what this blogpost is about. So as you might have guessed, in this blogpost I will cover how to upload files to SharePoint with JavaScript using Microsoft Graph for the request, and Microsoft Authentication Library for authentication.

I recently had to solve this for a client, and I used a lot of time banging my head against the wall looking for resources. It was not really the lack of resorces that was the issue - but that every example was either to big - or it took for granted that I had some sort of understanding that I was obviously lacking. So when I finally figured out how to do it - and how little code it actually requires - I decided that I needed to blog about it. Hopefully this blogpost will save you some time!

I also mada a small vuejs app so you can get up and running quicly. My goal was to present you with the bare minimum amount of code that you need - and hopefully you can build on top of that.

Prerequesites: You should know basic programming, and have an understanding of working against an API - and different authentication flows.

Source code: You can find the full source code for this example on my github. Note, this is a stripped down example to show you the minimum of what you need to upload a file. Its a good baseline/starting point to build on.

Introduction

There are four steps you need to complete when uploading files from a javascript app with graph. Lets have a quick look at each of them before we go into the details.

You need to register a single page application (SPA) in Azure Acive Directory (AAD).
- You will use this to authenticate your users.
You need to use Microsoft Authentication library (msal) to authenticate against the SPA you create in the first step.
- So you know who wants to upload a file - and that they have permission to do so.
You need to handle the file the user has selected.
- Microsoft Graph accepts ArrayBuffer, Buffer or Blob objects.
You need to make a request to Microsoft Graph with an Authentication Token from msal, and the file your user has selected.

Maybe you allready know how to do some of these steps, or maybe you are new to all of them. In the rest of this blogpost I will cover every step in detail. I also provide you with a list of resources.

Creating an app registration for a single page application in Azure AD

Since you are reading this blogpost I'll asume that you allready have a Microsoft 365 tenant where you would like to upload the documents. If not you can register for a free dev tenant her.

If you don't have admin priveleges to Azure AD you need to get somenone who does to register the app for you.

1. Log in to Azure Active Directory.

2. In the menu on the left select App registrations

3.Select "New registration

4. Fill in the name, select the account types you would like to support. And set the Redirect URI type to "Single-page application (SPA)".

Note, the URI you fill in must match the url where your app is running. In my example code that is localhost:3000. You can change this URI later when the code is running from somewhere else.

Click "Register". On the app info page copy down the Application (client) ID, and the Directory (tenant) ID.

Thats it. You now have a single page app registration.

Authenticating with Microsoft Authentication Library

Example code

I have made a small vue app to give you an example that you can actually run right away. But all the logic is written in vanilla javascript so you don't need to know vuejs to use the example. You can find the source code here.

Information on how to get the example code up and running is documentet in the repos readme file so I will not cover that in this blogpost.

To be able to upload a document we first need to authenticate the user against the SPA you have registered in Azure AD.

Configuration

const msalConfig = {
  auth: {
    clientId: "YOUR APP ID FROM AZURE REGISTRATION",
    authority:
      "https://login.microsoftonline.com/YOUR_TENANT_ID",
    //This URL must match the one set in azure app reg
    redirectUri: "http://localhost:3000/"
  },
};

const msalRequest = {
  scopes: ["User.Read", "Files.ReadWrite", "Files.ReadWrite.All"] 
};

Code

First we create and initialize an msal-client. This is what we'll use to communicate with the Azure SPA and authenticate the user.

const msalClient = new msal.PublicClientApplication(msalConfig);

Then we write a function to handle the login. This is done by using the msal-client and calling the loginPopup function with the scopes we created in the configuration.

You can also add functionallity to get the token silently first if the user is allready logged in - so the user is not promted to log in every time. But since I wanted to keep this code sample as small as possible I left this out here, but you can see an example in the next code snippet.

export async function signInWithMsal() {
  const authResponse = await msalClient.loginPopup(msalRequest);
  sessionStorage.setItem("msalAuthName", authResponse.account.username);
}

We also have a function to get the msal token. This function is used in the next step when we call Graph. Here you can also se an example of ataining the token silently.

export async function getMsalToken() {
  let username = sessionStorage.getItem("msalAuthName");
  try {
    const silentRequest = {
      scopes: msalRequest.scopes,
      account: msalClient.getAccountByUsername(username),
    };
    const silentResult = await msalClient.acquireTokenSilent(silentRequest);
    return silentResult.accessToken;
  } catch (error) {
      //Add handling for new login promt here - if the silent request should fail
    console.error(error);
  }
}

Handling the selected file

Graph will axcept the file as an ArrayBuffer, a Buffer or a Blob. In my example we use a filereader object to read the file as an ArrayBuffer and send it to the uploadDocument function.

Obtain the filename and the file itself from the input field.

const filename = 
          document.getElementById("selectedFile").files[0].name;
const fileToUplode = 
          document.getElementById("selectedFile").files[0];

Create a FileReader and a function that will run when the FileReader is loading. Then call the readFileAsArrayBuffer function passing in the file. The onload function has an event parameter 'event.target.result' will contain the ArrayBuffer version of the selected file.

filereader.onload = async (event) => {
  await uploadDocument(filename, event.target.result);
};
//This will trigger the onload function above.
filereader.readAsArrayBuffer(fileToUplode);

Complete code for handling the file and calling uploadDocument().

const onSubmit = async (event) => {
      //prevents the site from reloading
      event.preventDefault();
      // sign the user in
      await signInWithMsal();
      //obtain the filename from the file
      const filename = document.getElementById("selectedFile").files[0].name;
      //obtain the file itself
      const fileToUplode = 
          document.getElementById("selectedFile").files[0];
      //create filereader
      const filereader = new FileReader();
      //create function that will run when filereader is loading
      filereader.onload = async (event) => {
        //call uploadDocument function and pass in filename and file as ArrayBuffer
        await uploadDocument(filename, event.target.result);
      };
      //call the readAsArrayBuffer on fileReader and pass inn file.
      //This will trigger the onload function above.
      filereader.readAsArrayBuffer(fileToUplode);
    };

Making a request to graph

Now that the authenitcation is handled we can go ahead an make a request to Microsoft Graph. First we need to build the url to use with the request. Then we need to handle the file so it can be sent with the request, and lastly we need to send the request to graph.

Building the graph url to use

I decided to write a section on how to build your graph-url since I thought it was difficult to figure out exactly what it should contain.

This is how the url should look:

  const uploadURL = "https://graph.microsoft.com/v1.0/sites/<YOUR DOMAIN, SOME_ID, SOME_OTHER_ID>/drive/root:/"
 + filename + ":/content";

I think "SOME_ID" should be the Site-id, and the "SOME_OTHER_ID" should be the web-id. But instead of looking these up I found a graph request that will return the complete id including domian.

To attain it just run the below request in Graph Explorer (or Postman).

Note, to run this request you need to include a bearer token. If you do it from graph explorer it does this for you when you log in. If you do it from postman you need to get the access token first - and then run the below request.

https://graph.microsoft.com/v1.0/sites/YOUR_DOMAIN.sharepoint.com:/sites/NAME_OF_SITE_YOU_WANT_TO_UPLOAD_TO/

This will give you a response that contains an id like this:

Copy the whole "id" and put it in your uploadURL

https://graph.microsoft.com/v1.0/sites/PUT_THE_ID_FROM_PREVIOUS_STEP_HERE/drive/root:/"
 + filename + ":/content"

Making the request

There is a Microsoft Graph SDK for javascript, but for this example I'm using a regular window.fetch request instead of creating a graphClient. To learn more about the Graph SDK see links listed in Resources.

We pass our uploadURL as the first parameter to fetch. The secod parameter is an object that contains the header with the authorization Bearer token, and a body that contains the file.

export async function uploadDocument(filename, fileToUpload){
  const uploadURL = "https://graph.microsoft.com/v1.0/sites/<YOUR DOMAIN, SITE, AND WEB ID HERE >/drive/root:/" + filename + ":/content";
    await window
    .fetch(uploadURL, {
      method: "PUT",
      headers: {
        Authorization: `Bearer ${await getMsalToken()}`,
      },
      body: fileToUpload,
    })
    .then((response) => {
        // Here you can implement some user feedback. "File uploaded" etc.. 
    })
    .catch((error) => {
      console.error("ERROR UPLOADING");
      console.error(error);
    });
}

And thats it. You have now uploaded a file to SharePoint!

Working with large files

If you are working with larger files (4MB+) you could use an upload session to handle the request. See links in Resources below for more information about that.

Resources

Microsoft Graph JavaScript Client Library - npm site.
Make API calls using the Microsoft Graph SDK - Microsoft docs
Upload a large file with a upload session - Microsoft docs
Upload small or large files using Graph - YouTube, Microsoft 365 Developer channel
Microsoft Graph JavaScript Client Library - GitHub, Microsoft Graph repo
Build JavaScript single page apps with Graph - Tutorial - Microsoft docs

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. 🙂

Thank you for reading, and happy coding!

/Eli

Testing Teams apps made easier with the new developer portal

Eli H. Schei — Fri, 12 Nov 2021 13:06:48 +0000

One of my most read blogposts isthe one about sideloading apps in Microsoft Teams, so when I heard about the developer portal and how it makes it easier to test Teams apps I thought I should write about that too. The developer portal was made general available for all Teams developers in october this year (2021). I really like that you get both resources and tools presented in the same place. And of course that they have made it very easy too test Teams apps.

Note! Since I have allready been testing Teams apps before, I have enabled both sideloading and the ‘allow interaction with cusom apps’ setting on my dev-tenant. I have not tried to test an app from the developer portal without these settings – so its possible you still have to enable them to use the developer portal for testing.

How to test teams apps through the developer portal

Start by navigating to the developer portal, you can find it here: https://dev.teams.microsoft.com/home . If you are not allready logged in – do so.

In the navigation on the left side, select Apps. This will show you the apps that you have allready added. There are also shortcuts to create a new app (I havn’t tested this yet) or import an existing app. In this blogpost I will assume you allready have an app you want to test, so either import it, or select it from the list.

When you select an app you will get a landing page for that specific app. Here you can find a lot of usefull information about the app, and you can also change some configurations from here.

In the upper right corner you will see a button that sais “Preview in Teams”.

When clickling the button you will first get promted to open Teams, and inside Teams you’ll get a dialog to add the app to a teams tab. Click the “Add to a team” button and select the team where you would like the app to be installed.

And thats it, now you can test your app inside teams. 🙂

Pro tip: Add the developer portal as an app in Teams

The developer portal is actually available as a Teams app itself. Install it and you can manage and test your Teams applications directly from teams.

Resources

Manage your Microsoft Teams apps with the Developer Portal – Microsoft 365 Developer Blog
Manage your apps with the Developer Portal – Teams | Microsoft Docs *** Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. 🙂

Thank you for reading, and happy coding!

/Eli

5 reasons I started a developer blog and why you should concider starting one too

Eli H. Schei — Wed, 03 Nov 2021 09:21:59 +0000

After a two month “blogging dry spell” it might be a little ironic that now is when I decide to write a blogpost about blogging. But I’d like to get back into the habit of writing regularly, and I think you should consider it too! In this blogpost I will explain why.

After a decade as a front-end developer I finally started a developer/tech-blog in february 2021. Why now? Why not 5 years ago, or 10 years ago? The short answer is “imposter syndrome”. I felt like everything was written before and/or I didn’t know enough about a subject to blog about it. None of these are good reasons for not blogging.

1. You have a unique point of view

It does not matter if you have worked as a developer for years, or if you are just starting out. Your point of view are unique. Your ways of explaining something is unique, and even though there are hundreds of blogposts about a subject your blogpost might be the one that will help someone else.

In my experience I can read multiple different blogposts about exactly the same topic, and only one of them makes sense to me. Thats why I decided to add my voice to the mix – and thats why there are always room for more bloggers!

2. We wan’t to learn from someone at our own level – or just one step above

Have you ever read a blogpost and thought “I feel like there is something secret written between the lines, and I don’t know what it is”. This can typically be a problem when an expert tries to write something for beginners. The expert have forgotten what it was like when they just started out, and take a lot of knowledge for granted – and without even thinking about it they leave it out of their explanations.

Thats why you should write about stuff as you’re learning them, or right after. When you still remember all the questions you had, and what type of challanges you met.

3. You get a deeper understanding of the subject

The process around writing a blogpost will give you a better understanding of a subject. And probably about some related subjects too.

For most of my blogposts I try to find some good resources that the reader can benefit from – and that means I have to locate and read those resources myselfe to make sure they are relevant. If I was not blogging I probably would not read as many other blogs either – and I would miss out on the knowledge other people share.

Writing things down also helps you to remember it better. And it gives you an reference you can go back to later. Like my github cheat sheet I use (and update) regularly.

4. You help others avoid the issues you have encountered

At some point in your developer journy you have probably encountered an issue that you have trouble finding good resources on. You know, when you actually go to page 2 on google out of desperation “Someone must have solved this before!?”. And after hours (days/weeks) you are finally able to fit together small pieces of information from multiple sources – and find the solution to your issue.

The next time this happens you should write about the issue – and the solution – so the next person that is googling it doesn’t need to spend as much time on it! Sharing is caring!

5. It can give you opertunities

A lot of developers have portfolios to showcase what they can do. But if you don’t have time to create multiple portfolio projects a blog is a great way to showcase your knowledge, and highlight what you’re most interested in.

A blogpost can also be a great outline to a conference talk, or even a workshop. You can use it as a baseline if you are sending in a call for papers, or creating an online course.

6. You can earn some money

This is not one of my reasons, and it is not a goal for me right now. But that does not mean that it can’t be one of yours. Lots of people make money of their content, here are some great resources you can look into:

Maybe one day I’ll take this blog ‘to the next level’ and monitize it, but for now I’m happy with keeping it simple and don’t overthink this blogging thing. 🙂

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. 🙂

Thank you for reading, and happy coding!

/Eli

How to become a console.log() ninja

Eli H. Schei — Wed, 22 Sep 2021 12:16:10 +0000

If you are a web developer I'm guessing you have used console.log() a couple of (thousand) times. But did you know that the console object has some other usefull methods you can use to structure the output you get?

What is the console object?

First, a very with a short introduction to the console object before we dive in to its methods.

So what is the console object? The MDN Web docs sais "The console object provides access to the browser's debugging console (e.g. the Web console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided."

In other words, it is a object that is available to use for debugging purposes.

Lets take a look at some of the methods it provides.

console.table()

You have two objects that contains the same structure of information about two pets. You add both pets to an array.

let myPet = {name: "Poppy", animal: "cat", age: "2", favoriteToy: "ball"};
let myOtherPet = {name: "Harry", animal: "pig", age: "3", favoriteToy: "food"};

let pets = [myPet, myOtherPet];

If you want to print the array to the console you can use console.log(), that will look like this:

If you would like a better overview of what the array contains you can use console.table() instead.

console.table(pets);

That will give you a nice table presentation of the array content, like this:

console.group()

You can use console.group() to create collapsible groups of outputs. For instance you can use it to group output from functions.

const function1 = () => {
    console.group("Function 1 output");
    console.log("this is a message from function1");
    console.groupEnd();
};

const function2 = () => {
    console.group("Other function output");
    console.log("Well hello there!");
    console.groupEnd();
};

function1();
function2();

When the functions are called you will get the messages presented like this:

Nested groups

You can also nest groups inside eachother

const function2 = () => {
    console.group("Other function output");
    console.log("Well hello there!");
       console.group("This group is nested inside of the 'Other function output' group");
       console.log("Hello from inside this group");
       console.groupEnd();
    console.groupEnd();
};

collapsed groups

If you want the groups to collapsed as default you can use console.groupCollapsed("name of group") instead of console.group("name of group")

console.dir()

When you want to output information about an object in a structured manner you can also use console.dir(object);

console.assert()

If you want some condition to decide if your ouput is displayed in the console, console.assert() is the function for you. This function takes two parameters, a boolean and a string. The message (string) will only be displayed in the console if the boolean value is false.

const function1 = (condition) => {
     console.assert(condition, "This message will be displayed as a warning if the condition equals false");
};

function1(false);

Adding color to your console output

The console object have two built in functions that will add color to the displad text. These are console.warn() and console.error(). And as you might have guessed they will be displayed as a warning and an error.

Add your own styling

If you add %c before your string, and pass a string of styling as a second parameter you can style your output.

Other usefull console methods

Create and use a timer

You can use console.time() to start a timer, and console.timeEnd() to end it.

Where is your function being called?

Use console.trace() to see where the function was called from

Resources

console (MDN)

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. :)

Thank you for reading!

/Eli

My top 5 favorite newsletters to keep up with frontend development news

Eli H. Schei — Fri, 10 Sep 2021 07:38:01 +0000

It can be overwhelming to keep track of everything in the tech-universe - things changes so fast. And I have spent too much time on twitter, online newspapers and forums, scrolling my life away as I look for the things that are relevant for me and my developer journey. And then I realised I should let someone else do the scrolling. So I subscribed to a lot of newsletters (and then unsubscribed to the ones that didn't quite give me what I wanted).

I usually just scan through the newsletters and save the links I want to read in pocket. Then I try to block a 30min session in my calendar 2-3 times a week to actually read the things I save.

Here are the top 5 newsletters I subscribe to - and actually read.

Stephan's Web WeeklyI love the mix of humor and usefull tips and tricks.
JavaScript WeeklyNice collection of news, tips, tutorials, opinions and stories.
Frontend focusAlso a mix of news, tutorials, articles and stories.
The A11y project newsletterAs the name suggests this newsletter is related to news in the accessibility (a11y for short) space
DEV Community DigestThis is not really a news letter, but if you create a profile here on on dev.to you will get regular emails with links to articles based on your interests.

Do you know about any good newsletters I should check out?

How to register an application in Azure AD using Azure CLI

Eli H. Schei — Thu, 02 Sep 2021 06:01:33 +0000

If you are working as a M365 developer you probably have had to register an application i Azure AD at some point. In this blogpost I will show you how you can do so using Azure CLI.

Prerequesites: You need to download and install Azure CLI.

Sign in to your tenant

When you have installed the Azure CLI you can sign in to your tenant. If you are on a dev-tenant or you don’t have a subscription to your account you should also add the “Allow-no-subscription” flag like shown below.

az login


az login --allow-no-subscriptions

Add the app

When you have successfully signed in you can register a new app with a simple line.

az ad app create --display-name MyApp01 --available-to-other-tenants false

This will return a JSON object with the app information. I have shortened it down a bit in the example below.

{
  "acceptMappedClaims": null,
  "addIns": [],
  "allowGuestsSignIn": null,
  "allowPassthroughUsers": null,
  "appId": "ee26ecb3-977f-4520-ac21-be9eec424538",
 ...
  },
  ...
  ],
  "oauth2RequirePostResponse": false,
  "objectId": "301fc40c-a293-4509-8178-9d1b0fd76444",
  ...
  },
  ...
}

Two values that you should notice are the “appId, and the “objectId”. These values are often used when connecting to your registered app remotely. You can find the same information in the azure portal.

Resources

List of Azure CLI – Azure AD app commands (Microsoft docs)
Azure Command Line Interface documentation startpage (Microsoft docs)

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. :)

Thank you for reading!

/Eli

Accessibility evaluation tools

Eli H. Schei — Fri, 27 Aug 2021 06:12:53 +0000

After learning about different accessibility principles, looking at more complex challenges, and going in depth on ARIA we have finally arrived at the last part of this series. And it is time to talk (write) about accessibility evaluation tools.

There are a lot of different tools to use for accessibility evaluation, in this post I will cover my personal preferences. If you know about an awesome tool I should try please let me know!

What are accessibility evaluation tools?

Like the name sugests accessibility evaluation tools are tools that help you evaluate how accessible a site is. These tools perform automated tests and gives you feedback on how accessible your site is according to the WCAG principles.

Remember to think for yourself.
These tools can be of great value, especially if you are new to accessibility. But it is important to remember to think for yourself as well. Focus on learning and understanding the different WCAG principles and how to implement them rather than relaying on tools only.

I use these tools regularly but they are not a part of my everyday workflow. Typically I run one of them when I have finished a new feature - before deploying to test - to make sure I havn't missed anything. Or if I refacor a component and I'm afraid my changes might "break" something I run an evaluation to make sure the content is still accessible.

The tools I use

As I mentioned above there are a lot of different accessibility evaluation tools, and they mostly cover the same things. The decision of which tool to use often comes down to personal preference.

Siteimprove

The Site Improve chrome extension gives you a button in your browser that will run an accessibility test on the page you are currently on. The results of the test shows up as a panel to the left in your browser window. It displays issues sorted into different categories and gives you details about what should be fixed - and also hints on how to fix it.

I love siteimprove. It's easy to use, it gives you a quick overview - and also provides details if you need them. It gives you a lot of information about the different areas of accessibility.

Lighthouse

Lighthouse is available as its own tab in chrome devtools

I mainly use Lighthouse to test the performance of a website (which is also an important part of accessibility - not everyone have access to a fast internet connection). But it will also give you an accessibility score and tell you what needs to be fixed.

Axe dev tools

Like lighthouse Axe dev tools has its own tab in devtools. You can scan the whole site, or only parts of it (requires you to log in). It presents a list of issues and possible solutions to fix them.

Tools for checking colors

There are a lot of different color checking tools out there. Some browsers also have their own built-in version in devtools. But the tools I use most are WebAIM contrast checker and contrastchecker.com.

Other resources

List of accessibility tools (W3C)
Introduction to accessibility tools (WebAIM)

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. :)

Thank you for reading, and good luck with your accessibility evaluation!

/Eli

A list of useful git resources + cheat sheet

Eli H. Schei — Wed, 04 Aug 2021 13:33:37 +0000

I’ve been collecting a list of usefull resources to learn, and get better in useing, git. And I thought I would share it with you. I also created a cheat sheet with the commands I use the most. I keep both the list and the cheat sheet in a github repository – feel free to add to them if you know about some good resources that I havn’t mentioned here.

I will try to keep this blogpost up to date, but you can always find the newest version on github.

Resources

Note: Resources that cost money are marked with 💰. I’m not sponcored by any of these. These are resources I found usefull myself.

Websites

An intro to git and github for beginners (Hubspot)
How to write a git commit message (Chris Beams)
Confusing terms in the git terminology (dev.to by Pragati Verma)

Books

Commit guidelines (git-scm.com book)
Git essentials (Ferdinando Santacroce) 💰

Videos

Learn Git In 15 minutes (Colt Steele)
Learn GitHub in 15 minutes (Colt Steele)

Podcasts

git fundamentals (Syntax fm)
git rebase explained (Syntax fm)
git and github (Ladybug podcast)

Cheat Sheet

Click here for the image in full size. Or here for the markdown version.

A deep dive into ARIA

Eli H. Schei — Mon, 12 Jul 2021 10:45:09 +0000

Have you heard about ARIA attributes but don’t really understand what they are, or how to use them? Or maybe you know the basics but wan’t to deepen your understanding on the topic? Either way you are in the right place! In this blogpost I will cover what ARIA is, why and when you should use them. I will also go into ARIA roles in debth, and ARIA states and properties.

Prerequesites: I will assume you have some basic understandig of accessibility concepts, if you don’t I recommend to read “Part 1: Introduction” before diving into this blog post.

What is ARIA?

I briefly covered this in “Part 1: Introduction” but thught I should include it here as well.

The MDN Web Docs defines ARIA like this: “Accessible Rich Internet Applications (ARIA)is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.”

If a screen reader can’t understand the semantics of your web site content – your site is unaccessible to those who use that kind of assistive technology. This is where ARIA comes in – by adding ARIA attributes to your HTML elements the screen reader can get the context and descriptive details. ARIA attributes have no effect on how the HTML elements are visually presented.

Different types of ARIA

ARIA attributes is a common name for two main categories: “ARIA roles” and “ARIA states and properties”. While ARIA roles describes the type of user interface an HTML element represents, ARIA state and properties describes the current state of the element, and are likely to change as the user interacts with the application. In the next sections we will take a closer look at both roles, and states and properies.

When should you use ARIA?

ARIA are supposed to be a supplement to your HTML. If should focus on making a logical site structure, using semantic HTML elements and giving things descriptive names. Adding ARIA attributes should be a last resort.

That being said, it mostly applies to the use of ARIA roles – since thats quite similar to semantic HTML. ARIA states and properties on the other hand can be used with both semantic or non semantic HTML elements to give the user even more information.

ARIA Roles

There are a lot of different ARIA roles and they are divided into six categories. In general they all describe different types of user interfaces.

Widget roles
Describes interactive components like “button”, “progressbar” or “tablist” (++). Should only be used where there are no semantic HTML elements to match, or if the semantic element is not supported in a commonly used browser.
Use <button> instead of <div role="button">

Composite roles
These roles are typically “parent roles” of widget roles. Like “radiogroup” is the parent of widget-role “radio“.

Document structure roles
Used to describe the structure of a webpage. Like the other roles these should also only be used if there is no semantic element that can be used instead.

Landmark roles
These roles also describes the site structure, but from a higher level. Landmark roles include, but are not limited to, “banner”, “main” and “navigation”.

Live region roles
Used to describe what type of live content can be expected. Includes attributes for “alert”, “timer” and “status”.

Window roles
There are two window roles “dialog” and “alertdialog”. These are used on content that are ment to be displayed as a sub-window, or modal.

You can find a full overview of the different roles on the W3 recommendations site

How to use ARIA roles

Like I mentioned previously you should strive to use the correct semantic elements and only add ARIA to add extra context or information. Lets look at some examples.

//using ARIA role
<div role="banner">
   This is the header area of my website
   <img src="logo.jpg" />
</div>

//using semantic HTML
<header>
   This is the header area of my website
   <img src="logo.jpg" />
</header>

In the above example I use the role “banner” to indicate that this is the main header area of the website. And that this area will contain information such as navigation links, logo etc. But there are also a semantic HTML element that will indicate the same role, .

Always exceptions In most cases you want to go with the semantic HTML, but in some special instances you might need to use the role attribute instead. One example of this is if you work on a project with a lot of legacy code and you don’t have the budget to refactor it. Then a quick fix to make it more accessible would be to add the role=”banner”. Or if you have no access to the html you can add the role=”banner” using javascript.

And not every user interface has a corresponding semantic element, and then we can use ARIA roles to make the element accessible. Lets look at an example using a “tablist”.

<div role="tablist">
    <button role="tab"> TAB 1</button>
    <button role="tab" >TAB 2</button>
</div>
<div role="tabpanel">My first tab</div>
<div role="tabpanel">My second tab</div>

In the above example you can se that I have given the first <div>a role="tablist". And inside it are two buttons that both have a role="tab". Without these roles it would be impossible for assisitve technology to understand this part of the website.

The elements with the role="tab" controls the visibility of an accosiated elemented with the role="tabpanel". We will take a closer look at how these relationships are configured in the next section about state and properties.

ARIA States and properties

The other category of ARIA attributes are “states and properties”. These will sometimes change as the user interacts with the application. When changes occures the assistive technology is notified and can convey the information to the user.

Difference between state and properties
The difference is subtle and it’s not really important either. But you can think of it like this: a state is likely to change during user interaction, and a property is less likely to change. Lets look at some examples.

aria-checked. Is likely to change if the user selects or unselects a checkbox. So this is a state.
aria-requiered. The value of this is less likely to change as the user interacts with the site. So this is a property.

ARIA states and properties are divided into four categories:

Widget attributes – receive user input and process user actions.
Live region attributes – indicates that content changes may occur without the element having focus.
Drag and drop attributes
Relationship attributes – indicate relationships or associations between elements which cannot be easaly determined from the document structure

Lets continue with our tablist example and add some state and properties to it as well.

<div role="tablist">
    <button role="tab" 
            aria-selected="true" 
            aria-controls="tab-1"> 
              TAB 1
    </button>
    <button role="tab" 
            aria-selected="false " 
            aria-controls="tab-2"> 
              TAB 2
    </button>
</div>
<div role="tabpanel" aria-labelledby="tab1" id="tab-1">My first tab</div>
<div role="tabpanel" aria-labelledby="tab2" id="tab-2">My second tab</div>

Above you can see that we have added the attributes “aria-selected” and “aria-controls” to the button elements. aria-selected is in the category ‘widget attributes¨’, and it can have the value true or false. It describes wich of the elements that are currently selected. The other attribute “aria-controls” is a relationship attribute and tells us to wich of the tabpanels the button is connected.

Another example of a relationship attribute is “aria-describedby” where the value points to the ID of the elements that describes the current element.

<button aria-describedby="openDialogInfo">Open dialog</button>
<div id="openDialogInfo">
    This will open the form in a dialog. All changes you have allready made will be lost.
</div>

Aria-label vs aria-labeledby
Aria-label defines a string that labels the current element. Only use this if there is no visual label. If there is a visual label use that and add the “aria-labeledby” attribute instead.

Using ARIA state and properties to give feedback on user interaction

Its important to give the user updated info about the result of their interactions. As I mentioned previosuly – if states or properties change the assistive technology is notified and can tell the user what changed. Lets look at some of the attributes that can be used to provide information as the user interacts with your website.

aria-invalid. Tells the user if their input is valid. This has four different states: false – which means no errors are detected. grammar – which means grammatical error spelling – which means a spelling error is detected true – which means the input is invalid
aria-valuemin, aria-valuemax, aria-valuenow. These attributes are used to tell the user the min, max and current value of an element. The min and max values will stay the same but the valuenow will update based on user input.

To keep this post from getting any longer I will stop here. But there are a lot more attributes and its a good idea to familiarize yourself with them so you know what to reach for to make different interactions accessible.

You can find a full list of the different states and properties here

Resources

Accessible Rich Internet Applications (WAI-ARIA) 1.1 (W3C Recommendations)
Using WAI ARIA (W3 Recommendations)
List of roles (W3 Recommendations)
List of states and properties (W3 Recommendations)
ARIA techniques (MDN Web docs)
ARIA roles (MDN Web docs
Getting started with ARIA (The a11y project)

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

5 must have extensions when working with SharePoint framework (SPfx)

Eli H. Schei — Wed, 30 Jun 2021 11:20:53 +0000

I have previosly written a blogpost about my favorite extensions for VSCode. Today I want to share my favorite SPfx-specific extensions and tools. If you know about some extension, tool or package that should be on this list let me know!

1. SPfx fast-serve

Do you feel like it takes forever to serve your project on the local server? And that the hot reaload is not exactly hot? Then you should try SPfx fast serve! This article describes it in more detail and also covers the setup.

2. SPfx snippets

A nice little collection of snippets so you don't have to write everything from scratch.

Also, if you have any feedback or questions, please let me know in the comments below. :)

Thank you for reading, and happy coding!

/Eli

DEV Community: Eli H. Schei

How to upgrade your SPfx project to the latest version, and how to fix/avoid common issues

How to upgrade your project

Common errors and how to fix them (or avoid them)

1. Check for duplicate dev-dependencies

2. Delete node_modules, and package-lock.json

3. Deprecated tslint rules

4. JavaScript heap out of memory

Summary

What is a Microsoft 365 Developer, and how to get started

What does it mean to be a Microsoft 365 Developer?

What even is Microsoft 365?

So what do a Microsoft 365 developer typically do?

How can you build on top of Microsoft 365?

SharePoint Online

Teams

Power Platform

Office

Azure

Microsoft Graph

How to get started as a Microsoft 365 developer?

Frontend or backend

Resources

Upload files to SharePoint with JavaScript using Microsoft Graph and Microsoft Authentication Library

Table of contents:

Introduction

Creating an app registration for a single page application in Azure AD

Authenticating with Microsoft Authentication Library

Handling the selected file

Making a request to graph

Building the graph url to use

Making the request

Working with large files

Resources

Testing Teams apps made easier with the new developer portal

How to test teams apps through the developer portal

Pro tip: Add the developer portal as an app in Teams

Resources

5 reasons I started a developer blog and why you should concider starting one too

1. You have a unique point of view

2. We wan’t to learn from someone at our own level – or just one step above

3. You get a deeper understanding of the subject

4. You help others avoid the issues you have encountered

5. It can give you opertunities

6. You can earn some money

How to become a console.log() ninja

What is the console object?

console.table()

console.group()

console.dir()

console.assert()

Adding color to your console output

Add your own styling

Other usefull console methods

Resources

My top 5 favorite newsletters to keep up with frontend development news

How to register an application in Azure AD using Azure CLI

Sign in to your tenant

Add the app

Resources

Accessibility evaluation tools

What are accessibility evaluation tools?

The tools I use

Siteimprove

Lighthouse

Axe dev tools

Tools for checking colors

Other resources

A list of useful git resources + cheat sheet

Resources

Cheat Sheet

A deep dive into ARIA

What is ARIA?

Different types of ARIA

When should you use ARIA?

ARIA Roles

How to use ARIA roles

ARIA States and properties

Using ARIA state and properties to give feedback on user interaction

Resources