Untitled RSS Feed

From ARM to Bicep 💪🏽

Mon, 10 May 2021 00:00:00 GMT

If you have deployed a resource in Microsoft Azure as part of your CI/CD pipeline you have probably worked with ARM templates. These templates can be used to automate your resource deployment to Azure and help you to have consistent environments whether it’s for testing, development or production purposes. However, there are some shortcomings when it comes to complex environments especially when you have many resources and the dependency between them makes the templates to be either super busy, very complex, or unreadable.

For that Microsoft has introduced Bicep which is designed to overcome these issues and help you with your infrastructure as code setup.

What’s not working with ARM templates?

Although there are some great features which make working with ARM templates a good experience such as functions, variables, nested templates etc, there is some room for improvements regarding below which has been raised by the community:

No comments: As of now you can’t use comments in the JSON files used by Azure Resource Manager. Since the users of ARM templates are mainly developers, comments would potentially help the next user to better understand the template and what’s going on in it. I’d personally argue with the fact that if you need comments in a template it probably means you need to refactor it, however, this is something which could come handy at times.
Parameter duplication: Since ARM templates are reusable, you would normally use parameters for customising the resource naming, number of resources to be deployed, pricing tier and so on. The problem is that these parameters would be needed and if you haven’t provided a default value you would get an error. So you might end up with lots of parameters repeated in different files for different environments, or simply replicating a single file and have lot’s of extra parameters which are not needed.
Validation: Although there is a validate command you can use to validate your templates, there might be times where validation doesn’t show you enough information or is not enough to prevent a failure in the actual run.

What is Bicep?

Bicep is a DSL (domain specific language) which can be used to write your Infrastructure as Code (IaC). Instead of writing ARM templates you write your code with Bicep and it will transpile it to ARM for you. It simplifies the authoring experience and addresses some of the issues we mentioned earlier. Compared to using JSON, Bicep can help you simplify the template definition a great deal.

Let’s see this using a simple example. Imagine you are trying to create a storage account in Azure, with ARM template this is the minimum you will need:

Copy

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "storageAccountType": {
      "type": "secureString"
    }
  },
  "variables": {
    "diagStorageAccountName": "[concat('diags', uniqueString(resourceGroup().id))]"
  },
  "resources": [
    {
      "type": "Microsoft.Storage/storageAccounts",
      "apiVersion": "2019-06-01",
      "name": "[variables('diagStorageAccountName')]",
      "location": "[resourceGroup().location]",
      "sku": {
        "name": "[parameters('storageAccountType')]"
      },
      "kind": "Storage"
    }
  ]
}

Using Bicep it will be simplified to:

Copy

@secure()
param storageAccountType string
param location string = resourceGroup().location
var diagStorageAccountName = concat('diags', uniqueString(resourceGroup().id))
resource diagsAccount 'Microsoft.Storage/storageAccounts@2019-06-01' = {
  name: diagStorageAccountName
  location: location
  sku: {
    name: storageAccountType
  }
  kind: 'Storage'
}

You can see how much time and space you could be saving if you were to use Bicep.

Benefits

When it comes to the benefits of using Bicep, there is a list published in our documentation:

Support for all resource types and API versions.
Better authoring experience using editors such as VS Code (you will get validation, type-safety, intellisense).
Modularity can be achieved using modules. You can have modules representing an entire environment or a set of shared resources and use them anywhere in a Bicep file.
Integration with Azure services such as Azure Policy, Templates specs, and Blueprints.
No need to store a state file or keep any state. You can even use the what-if operation to preview your changes before deploying them.
Bicep is open source with a strong community supporting it.

Syntax

Every Bicep resource will have the below syntax:

Copy

resource <symbolic-name> '<resource-type>@<api-version>` = {  
  //properties
  name: 'bicepstorage2063'
  location: 'northcentralus'  
  properties: {
    //...sub properties
  }
}

Where:

resource: is a reserved keyword.
symbolic name: is an identifier within the Bicep file which can be used to reference this resource elsewhere.
resource-type: is the type of the resource you’re defining, e.g. Microsoft.Storage.
api-version: each resource provider publishes its own API version which defines which version of the Azure Resource Manager REST API should be used to deploy this resource.
properties: these are the resource specific properties. For example every resource has a name and location. In addition some have sub properties which you can pass on.

Parameters

When we talk about infrastructure as a code and reusability of our templates, we definitely end up using parameters to customise our resources. Be its name, sku, username or password, we will need to change these per environment or application.

In a Bicep file you can define the parameters that need to be passed to it when deploying resources. You can put validation on the parameter value, provide default value, and limit it to allowed values. The format of a parameter will be such as below:

Copy

param <parameter-name> <parameter-type> = <parameter-value>

Where:

param: is a reserved keyword.
parameter-name is the name of the parameter.
parameter-type: is the type of the parameter such as string, object, etc.
parameter-value: is the value of the parameter you’re passing in.

Let’s review two examples to get a better understanding of the structure.

Copy

@minLength(3)
@maxLength(24)
param storageName string

In this example you’re limiting the storageName parameter’s value length to be between 3 and 24 characters. Or:

Copy

@allowed([
  'Standard_LRS'
  'Standard_GRS'
  'Standard_RAGRS'
  'Standard_ZRS'
  'Premium_LRS'
  'Premium_ZRS'
  'Standard_GZRS'
  'Standard_RAGZRS'
])
param storageRedundancy string = 'Standard_LRS'

In this example you’re specifying the allowed values for the storageRedundancy parameter and also provide the default value if nothing is provided during the deployment.

With ARM templates you had to use a separate file to pass the parameters during the deployments usually with a name ending in .parameters.json. In Bicep you need to use the same JSON file to pass the parameters in:

Copy

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "storageName": {
      "value": "myuniquestoragename"
    },
    "storageRedundancy": {
      "value": "Standard_GZRS"
    }
  }
}

Variables

Similar to parameters, variables play an important part in our templates, especially when it comes to naming conventions. These can store complex expressions to keep our templates clean and their maintenance simple. In Bicep variables are defined using the var keyword:

Copy

var <variable-name> = <value>

Where variable-name is the name of your variable. For example in our previous Bicep file we could have used a variable for our storage name:

Copy

var storageAccName = 'sa${uniqueString(resourceGroup().id)}'

resource stg 'Microsoft.Storage/storageAccounts@2019-06-01' = {
  name: storageAccountName
  //...
}

Since we need a unique name for our storage account the uniqueString function is used (Don’t worry about that for now). The point is that we can create variables and use them in our template with ease.

There are multiple variable types you can use:

String
Boolean
Numeric
Object
Array

Expressions

Expressions are used in our templates for variety of reasons, from getting the current location of the resource group to subscription id or the current datetime.

functions

The good thing is that ANY valid ARM template function is also a valid Bicep function.

Copy

param currentTime string = utcNow()

var location = resourceGroup().location

var makeCapital = toUpper('all lowercase')

Ternary operator

To use conditions in your deployments you would use the if function in ARM templates, however, that’s not supported in Bicep. Instead, you can leverage the ternary operator:

Copy

param globalRedundancy bool = true

resource stg 'Microsoft.Storage/storageAccounts@2019-06-01' = {
  name: storageAccountName
  location: location
  kind: 'Storage'
  sku: {
    name: globalRedundancy ? 'Standard_GRS' : 'Standard_LRS' // if true --> GRS, else --> LRS
  }
}

Output

ARM templates have an output section where you could send information out of your pipeline to be accessed within other deployments or subsequent tasks. In Bicep you have the same concept via the output keyword.

Copy

resource stg 'Microsoft.Storage/storageAccounts@2019-06-01' = {
  //...
}

output storageId string = stg.id

This will return the storage id out to be used later.

Loops

In ARM templates if you wanted to deploy a resource multiple times you could leverage the copy operator to add a resource n times based on the loop count. In Bicep you have the for operator at your disposal:

Copy

resource foo 'my.provider/type@2021-03-01' = [for <ITERATOR_NAME> in <ARRAY> = {...}]

Where ITERATOR_NAME is a new symbol that’s only available inside your resource declaration.

Copy

param containerNames array = [
  'images'
  'videos'
  'pdf'
]

resource blob 'Microsoft.Storage/storageAccounts/blobServices/containers@2019-06-01' = [for name in containerNames: {
  name: '${stg.name}/default/${name}'
  //...
}]

This snippet creates three containers within the storage account in a loop.

Existing keyword

If you want to deploy a resource which is depending on an existing resource you can leverage the existing keyword.

Copy

resource stg 'Microsoft.Storage/storageAccounts@2019-06-01' existing = {
  name: storageAccountName
}

You won’t need the other properties since the resource already exists. You need enough information to be able to identify the resource. Now that you have this reference, you can use it in other parts of your deployment.

Modules

In ARM templates you had the concept of linked templates when it came to reuse a template in other deployments. In Bicep you have modules. You can define a resource in a module and reuse that module in other Bicep files.

Copy

.
├── main.bicep
└── stg.bicep

In our stg file you will define the resource, its parameters, variables, outputs, etc:

Copy

//stg.bicep
param storageAccountName
var storageSku = 'Standard_LRS'

resource stg 'Microsoft.Storage/storageAccounts@2019-06-01' = {
  name: storageAccountName
  location: resourceGroup().location
  kind: 'Storage'
  sku: {
    name: storageSku
  }
}

And in the main file you will reuse the storage account as a module using the module keyword:

Copy

//main.bicep
module stg './storage.bicep' = {
  name: 'storageDeploy'
  params: {
    storageAccountName: '<YOURUNIQUESTORAGENAME>'
  }
}

output storageName array = stg.outputs.containerProps

You only need to pass the required properties which in case of our storage account is the name.

The `any` keyword

There might be some cases where Bicep throws a false positive when it comes to errors or warnings. This might happen based on different situations such as the API not having the correct type definition. You can use the any keyword to get around these situations when defining resources which have incorrect types assigned. One of examples is the container instances CPU and Memory properties which expect an int, but in fact they are number since you can pass non-integer values such as 0.5.

Copy

resource wpAci 'microsoft.containerInstance/containerGroups@2019-12-01' = {
  name: 'wordpress-containerinstance'
  location: location
  properties: {
    containers: [
      {
        name: 'wordpress'
        properties: {
          ...
          resources: {
            requests: {
              cpu: any('0.5')
              memoryInGB: any('0.7')
            }
          }
        }
      }
    ]
  }
}

By using any and passing the value you can get around the possible errors which might be raised during the build or the validation stage.

Tooling

In terms of tooling the support is the same if not better than the ARM templates.

VS Code extension

VS Code comes with an official extension for Bicep. This extension gives you validation, intellisense, dot property access, snippets etc.

CI/CD

If you’re using GitHub Actions for your CI/CD pipeline, there is already a Bicep action created by our developer advocate Justin Yoo which you can use to build you bicep file and deploy it to Azure.

CLI

Bicep comes with a CLI that you can install locally on Windows, MacOS, and Linux. That gives you the ability to build and deploy your Bicep files with Azure CLI.

Summery

In short, I highly recommend using Bicep and improving your IaC and deployments. Of course if your ARM templates are too many, or very complex you might benefit from converting them more, but if you already have a streamlined pipeline with maintainable templates, you could keep them and create any new template using Bicep instead.

Exploring Azure Function Triggers and Bindings ⚡

Mon, 29 Mar 2021 00:00:00 GMT

Azure Functions is one of the the serverless services in Azure which allows you to run your business logic without worrying about where it’s running and how it scales. But it being serverless is not the highlight of this amazing service, the way it’s designed which allows you to leverage a very diverse set of triggers and input/output bindings without writing much code is to me the best of the best. So in this article I’ve decided to take you on a journey with a few of the common triggers and bindings and show you how to set them up quickly and without writing any unnecessary code.

Working with Azure Functions locally

Before we delve into the main topic of our discussion, I should quickly show you how easy it is to create and run these functions locally using a code editor or even a simple terminal.

If you’re using Visual Studio Code, you need to install the Azure Functions Extensions. For the command line approach, you’ll need the Azure Functions Core Tools and either Azure CLI or Azure PowerShell to create Azure resources. You can also use the Visual Studio 2019 in which case you need to install its Azure Development component. It has built in templates for you to get started and be able to create functions and deploy them to Azure right there and then. You can find the tutorial here.

The good news is that all of these tools are cross platform and compatible with Windows, Linux and MacOS.

I’ll just show you one of them and leave the rest to you. After you have installed the necessary tools, open a terminal (I use Windows Terminal) and initialize a new function using the init command:

Copy

func init myLocalFunctionProj --dotnet

cd myLocalFunctionProj

You can use other languages too. For a list of supported languages please visit the our documentation.

Now that you have a project you can create one or multiple functions in it:

Copy

func new --name HttpExample --template "HTTP trigger" --authlevel "function"

This will create an HTTP triggered function for you which you can run using:

Copy

func start

Now you can send request to your function, so open a browser and visit http://localhost:7071/api/HttpExample?name=Yas, the function should return the result and the browser should show you a Hello Yas message. You’re now ready to explore triggers and binding.

Triggers

There are quite a few triggers available which will cover almost any scenario you could think of. From a simple HTTP trigger to timer and blob, and a whole lot more are supported without you needing to write code. If I wanted to just quickly go through the most common ones, they are:

Type	Purpose
Timer	Execute a function at a set interval.
HTTP	Execute a function when an HTTP request is received.
Blob	Execute a function when a file is uploaded or updated in Azure Blob storage.
Queue	Execute a function when a message is added to an Azure Storage queue.
Azure Cosmos DB	Execute a function when a document changes in a collection.
Event Hub	Execute a function when an event hub receives a new event.
Event Grid	Execute a function when an event is sent to Event Grid topics or queues.

All of my examples will be using Csharp but you can use your language of choice. Examples of those can be found on Azure Functions documentation site.

Timer trigger

Timer triggers allow you to run the function on a schedule. All you need is a TimerTrigger attribute with its configuration:

Copy

[FunctionName("TimerTriggerCSharp")]
public static void Run([TimerTrigger("0 */5 * * * *")]TimerInfo myTimer, ILogger log)
{
    if (myTimer.IsPastDue)
    {
        log.LogInformation("Timer is running late!");
    }
    log.LogInformation($"Csharp Timer trigger function executed at: {DateTime.Now}");
}

This function will run based on the CRON expression you have specified. Our example CRON expression will run the function 12 times an hour, every 5th minute of every hour of the day.

Blob trigger

Blob triggers are very powerful and allow you to cover verity of scenarios from creating an image thumbnail on upload to check a file for virus.

Copy

[FunctionName("BlobTriggerCSharp")]        
public static void Run([BlobTrigger("container-name/{name}")] Stream myBlob, string name, ILogger log)
{
    log.LogInformation($"Csharp Blob trigger function Processed blob\n Name:{name} \n Size: {myBlob.Length} Bytes");
}

💡 You will need the Microsoft.Azure.WebJobs.Extensions package to use these attributes.

Cosmos DB trigger

If you wanted to become aware when a document is inserted/updated in your Cosmos DB, you can use this trigger:

Copy

[FunctionName("CosmosTrigger")]
public static void Run([CosmosDBTrigger(
    databaseName: "ToDoItems",
    collectionName: "Items",
    ConnectionStringSetting = "CosmosDBConnection")]IReadOnlyList<Document> documents,
    ILogger log)
{
    if (documents != null && documents.Count > 0)
    {
        log.LogInformation($"Documents modified: {documents.Count}");
        log.LogInformation($"First document Id: {documents[0].Id}");
    }
}

All you need is the connection string in your local.settings.json in the connection string section:

Copy

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "<storage-connection-string>"
  },
  "ConnectionStrings": {
    "CosmosDBConnection": "<cosmosdb-connection-string>"
  }
}

For all the other examples you can update your settings file accordingly. I won’t be going through more triggers because I want to show the bindings. But you can find examples of all the supported triggers in our reference documentation section.

Bindings

Bindings allow you to have input and output to/from your function out of the box. This is where magic happens and it’s super powerful. For example, if you wanted to have a function which is triggered by a queue and gets a blob as input, you will need this:

Copy

[FunctionName("BlobInput")]
public static void Run(
    [QueueTrigger("queue-name")] string myQueueItem,
    [Blob("container/{queueTrigger}", FileAccess.Read)] Stream myBlob,
    ILogger log)
{
    log.LogInformation($"BlobInput processed blob\n Name:{myQueueItem} \n Size: {myBlob.Length} bytes");
}

In this example the queue message contains the name of the blob. Or imagine people are uploading images into a blob container and you wanted an Azure Function to create thumbnails for you. You will need a blob trigger and a blob output:

Copy

[FunctionName("CreateThumbnail")]
public static void Run(
    [BlobTrigger("images/{name}")] Stream image,
    [Blob("thumbnails/{name}", FileAccess.Write)] Stream thumbnail,
    ILogger log)
{
  IImageFormat format;

  using (Image<Rgba32> input = Image.Load<Rgba32>(image, out format))
  {
    input.Mutate(x => x.Resize(320, 200));
    input.Save(output, format);
  }  
}

The two image will share the same name, although the container name is different. For the name of the output blob, you could also use some pre-defined functions such as {rand-guid} to generate a unique identifier or {DateTime} to use current time as the name, although this might not match your requirement all the times.

But what if you wanted to write it into the same container? In that case you couldn’t simply use the {name} for your output binding. To generate the name of the output blob at runtime, you need to use imperative bindings.

IBinder

Instead of using the [Blob] attribute, you could use an instance of IBinder interface which gives you much more control over your output binding and it’s name. The same example with a binder will look like:

Copy

using System;
using System.IO;
using Microsoft.Azure.WebJobs;
using Microsoft.Extensions.Logging;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;
using SixLabors.ImageSharp.Formats;
using System.Threading.Tasks;
using SixLabors.ImageSharp.PixelFormats;

namespace functions
{
  public static class createThumbnail
  {
    [FunctionName("createThumbnail")]
    public static async Task Run(
        [BlobTrigger("images/original-{blobName}", Connection = "AzureWebJobsStorage")] Stream image,
        string blobName,
        IBinder binder,
        ILogger log)
    {
      IImageFormat format;

      using (Image<Rgba32> input = Image.Load<Rgba32>(image, out format))
      {
        input.Mutate(x => x.Resize(320, 200));

        using (var writer = await binder.BindAsync<Stream>(
                      new BlobAttribute($"images/thumbnail-{blobName}", FileAccess.Write)))
        {          
          input.Save(writer, format);
        }
      }
    }
  }
}

💡 The reason we added a suffix to the blob name is to prevent the infinite look when we write to the same container.

Other bindings

There are heaps of bindings available for you to leverage and create great solutions to solve your business problems and you can find out about them here. All you need to do is to select the Reference > Triggers and bindings from the left hand side.

Summary

Hope this article has been interesting enough to intrigue you to go checkout Azure Functions and leverage their power to solve your business problems. Until next post, Sayōnara 👋🏽.

How to end-to-end test your Vue.js apps with Playwright 🧪

Sun, 07 Feb 2021 00:00:00 GMT

Playwright is one of the recently released end to end testing frameworks which enables fast, reliable and capable automation and is cross platform. I really like it, but since it’s very easy to setup and the community around it is super cool, I like it even more.

In this article I want to show you how you can write some tests for any Vue.js application which is using Auth0 as an identity provider. However, this could be used with any other provider too, since it covers the basics and makes you ready to write tests which cover different scenarios and user interactions.

Concepts

Before we delve into the nitty gritty of things here, we should all agree on a few concepts:

End-to-end tests: End-to-end tests (AKA E2E) are like back box testing where you don’t test individual components or unit of code, instead you focus on testing a scenario end to end. With this type of tests, you use a real instance of the application. They are ideal for creating reliable and bug free application since they mimic user behaviour.
Vue.js: is a fantastic progressive frontend framework which is ideal for building user interfaces. It’s like a middle ground between Angular and React and is built from ground up with developers in mind. It’s easy to pickup and integrate with other libraries or existing projects.
Auth0: is an identity provider which has gained a really good reputation thanks to its complete solution which helps people secure their applications and add features like single sign on, multi-factor authentication and social media login to their applications.

Stage is set

I have an application which is written in Vue.js. I have added authentication and authorization using Auth0 and have different features shown/hidden to users based on their access levels.

However, my unit and component tests don’t seem to cover some scenarios which our end users will do when interacting with our application. Some of this is because I have to use mocks when doing component testing, and unit tests don’t cover more than a piece of code.

Now I need a way to test my application as if a user is sitting in front of their computer and uses our application. To achieve this, I will have to use end-to-end tests.

Options

There are some great E2E test frameworks out there, and here are just a few:

Protractor
Nightwatch.js
Cypress
TestCafe
Playwright
WebdriverJS
OpenTest
Puppeteer

And many more. However, I really like Playwright because it is easy to use and setup, it’s cross platform and integrates nicely with every CI/CD pipeline you’d think of.

The code

So I have an application which basically lists movies and people can buy tickets and go watch it in an imaginary gold cinema. The app also has an admin page where only users with administrator role can access. So let’s break through the code bit by bit:

Main setup

In order for us to use the Auth0 as a plugin with Vue 3 we need to create a plugin and set it up in our main file. However, Vue 3 has changed the way we setup the plugins. So here is our little plugin (note code has been removed for brevity):

Copy

import createAuth0Client from '@auth0/auth0-spa-js';
let client;
///all the other methods and definitions
export const setupAuth = async (options, callbackRedirect) => {
  client = await createAuth0Client({
    ...options,
  });
  try {
    if (window.location.search.includes('code=') 
      && window.location.search.includes('state=')) {
      const { appState } = await client.handleRedirectCallback();
      callbackRedirect(appState);
    }
  }
  //...
  return {
    install: app => {
      app.config.globalProperties.$auth = authPlugin;
    },
  };
}

We also implement a route guard in the same file:

Copy

import { computed, watchEffect } from 'vue';

const authPlugin = {
  isAuthenticated: computed(() => state.isAuthenticated),
  loading: computed(() => state.loading),
  user: computed(() => state.user),
  popupOpen: computed(() => state.popupOpen),
  claims: computed(() => state.claims),
  getIdTokenClaims,
  getTokenSilently,
  getTokenWithPopup,
  handleRedirectCallback,
  loginWithRedirect,
  loginWithPopup,
  logout,
  getUser,
};

export const routeGuard = (to, from, next) => {
  const { isAuthenticated, loading, claims } = authPlugin;
  const verify = () => {
    if (!isAuthenticated.value) {
      return next({ path: '/login', query: { returnUrl: to.path } });
    }

    if (to?.meta?.authorize) {
      const roles = claims.value['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'];
      if (roles.find(r => r === to.meta.authorize.role)) {
        return next();
      } else {
        return next('/unauthorized');
      }
    }
  };
  if (!loading.value) {
    return verify();
  }
  watchEffect(() => {
    if (loading.value === false && claims.value) {
      return verify();
    }
  });
};

This route guard might look intimidating at first glance, but all we’re doing is to create an object which exposes the Auth0 client methods, and then checks the route for a metadata property called authorize which holds the value of the role which should have access to the page.

The rest is just checking whether they match and allow the redirect or send the user to the unauthorized page.

In our main file:

Copy

import { createApp } from 'vue';
import router from './router';
import { setupAuth } from '@/auth/auth-plugin';

const authConfig = {
  domain: process.env.VUE_APP_DOMAIN,
  client_id: process.env.VUE_APP_CLIENTID,
  redirect_uri: process.env.VUE_APP_REDIRECT_URL,
  audience: process.env.VUE_APP_AUDIENCE,
  advancedOptions: {
    defaultScope: 'openid profile email crud:users',
  },
};

function callbackRedirect(appState) {
  router.push(appState && appState.targetUrl ? appState.targetUrl : '/');
}

let app = createApp(App)
  .use(router);

setupAuth(authConfig, callbackRedirect).then(auth => {
  app.use(auth).mount('#app');
});

Here we’re simply creating an options object which is requied by the Auth0 SDK which has the client id, domain etc.

And once that’s done, we will create our app but instead of using the plugin right away, we will call the setupAuth which will then creates the client instance and returns the plugin instance. Now all we need to do is to call the .use and use our plugin instance.

Now that we’ve got our auth plugin setup, it’s time to setup our login component. Fortunately it doesn’t require much code:

Copy

<div v-if="!user">
  <a href="#" class="signup" @click.prevent="login">
    You need to sign in first!
  </a>
</div>

And in our component:

Copy

/// code removed for brevity
export default {
  methods: {
    login: async function() {
      try {
        await this.$auth.loginWithPopup();
        const user = await this.$auth.getUser();
        const accessToken = await this.$auth.getTokenSilently();
        this.$store.commit('SET_USER', user);
        //...
      }
    }
  }
  //...
}

The way this login works is that by clicking on the login button there would be a popup window opened from Auth0 where the user enters their credentials and press submit.

Router config

And the last thing we would have here would be the routing configuration:

Copy

import { createWebHistory, createRouter } from 'vue-router';
import { routeGuard } from '@/auth/auth-plugin';
//other imports
export const routes = [
  {
    path: '/',
    component: Home,
  },
  //...other routes
  {
    path: '/login',
    component: Login,
  },
  {
    path: '/admin',
    component: Admin,
    beforeEnter: routeGuard,
    meta: {
      authorize: {
        role: 'Admin',
      },
    },
  },
  {
    path: '/unauthorized',
    component: UnAuthorized,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

And that’s the basics of our application. Don’t worry I will put a link to the GitHub repo at the end so you would have all the code. I just want you to know at a really high level how the app is setup.

Setting up the tests

In order to add the package to our app, we will do it via the CLI. So go ahead and execute below command in your terminal at the root of your client app:

Copy

vue add e2e-playwright --dev

It will take a while and a whole bunch of stuff happens behind the scene, but it does all the heavy lifting for you, create a folder for the E2E tests, and even creates a example test for your convenience. It adds Playwright so you can write tests, and chai to handle assertions.

Writing tests

Writing tests is the next step, for each test you have a few basic things to do. Import the necessary objects and methods:

Copy

const { chromium } = require('playwright');
const { expect } = require('chai');

Here I am importing Chrome, but you have the option to use Safari or Firefox if you wish.

Now we need some variables:

Copy

const baseUrl = 'http://localhost:8080/';
const adminPassword = 'Super_Secure_Pass';
const adminUserName = 'admin@example.com';
const normalUserName = 'user@example.com';
const normalUserPassword = 'Super_Secure_Pass';

I am just defining the passwords here to make it easier to understand, you make sure you have them in your environment files and use them that way so that you don’t commit user names and passwords into your source code.

Now it’s time to write our tests, basically you need a describe method which is your test suite. In there you would need two variables for your browser and page instances:

Copy

describe('Authenticated Vue App: ', () => {
  let browser;
  let page;
})

Now you would need to create an instance of your browser and page. So go ahead and add a beforeEach method. Inside that, lunch your browser, create a new page and navigate to your home page:

Copy

before(async () => {
  browser = await chromium.launch();
  page = await browser.newPage();
  await page.goto(baseUrl);
});

Make sure you close these objects at the end of the tests via an after method:

Copy

after(async () => {
  await page.close();
  await browser.close();
});

You’re now ready to write your first test. In this test we’re going to go to admin page without authentication and see what happens. Based on our router guard’s code, we know that the user should be redirected to login:

Copy

it('An unauthenticated user should not be able to see the admin page', async () => {
  await page.goto(`${baseUrl}admin`);
  expect(page.url()).to.equal(`${baseUrl}login?returnUrl=/admin`);
});

If you now run the tests by running yarn test:e2e, you should see the test pass.

More complicated tests

Now to add a spin on our test, say we wanted to actually login and see what happens. In this case we need to click on the login button, then find the opened window and fill in the username and password, then click on submit and come back to our app. This would require a bit more coding, but still easy to find out from Playwright’s documentation.

First you would need to find the login button, then you need to use a Promise.all method to be able to get a reference to your popup window:

Copy

const [popup] = await Promise.all([
  page.waitForEvent('popup'),
  await page.click('a.signup')      
]);

Now that you have the reference, you need to fill in the info and click on the login:

Copy

await popup.fill('input[type="email"]', adminUserName);
await popup.fill('input[type="password"]', adminPassword);
await popup.click('button[type="submit"]');

And at last you need to make an assertion. Say you wanted to see whether an admin user will have access to the admin page. To do the assertion, you need to hook up to the close event of the popup window. So your test will look like:

Copy

it('be redirected back to admin page after login', async () => {
    await page.goto(`${baseUrl}admin`);
    
    const [popup] = await Promise.all([
      page.waitForEvent('popup'),
      await page.click('a.signup')      
    ]);

    popup.on('close', async () => {
      expect(page.url()).to.equal(`${baseUrl}admin`);
    });

    await popup.fill('input[type="email"]', adminUserName);
    await popup.fill('input[type="password"]', adminPassword);
    await popup.click('button[type="submit"]');
  });

The reason why you’d need a waitForEvent method in the Promise.all method is that you need to wait for the popup window to be able to get a handle on it. Now if you run the tests again, they should all pass.

Full code

You can find the full source code on my GitHub repository here.

Summary

And that’s how easy it is to write tests which mimic user interactions and can make you confident to ship reliable software. Happy testing and let me know what could automation have you done with Playwright if you got to that point 👋🏽👋🏽.

How much do you know about Azure CosmosDB Emulator? 🧐

Tue, 15 Dec 2020 00:00:00 GMT

Azure Cosmos DB is one of the foundational services in Azure, which provides high availability, global scale and an impressive performance. However, it could be a bit costly for developers to spin up an instance during their development especially if they don’t know some of the basics such as what should be the partition key, what throughput they should select and so on that much.

The Azure Cosmos DB Emulator is a service provided by Microsoft which allows you to emulate the Cosmos DB Service locally for development purposes. In addition, no matter whether you’re using Azure CosmosDB or not, at some point you might have to test some sort of DocumentDB locally.

Intro

Let’s be honest, there are other ways to work with Cosmos DB without paying any money such as a Free Trial Account which gives you $200 dollars to spend over a year, or even the Cosmos DB Query Playground which is an interactive website which helps you to learn the query syntax and provides you with a set of pre-defined JSON documents to work with.

But eventually you either run out of money, or your product is live and your developers want to develop new features and fix bugs to be released very quickly. That’s when Cosmos DB Emulator really comes to the rescue. You have other advantages such as ability to work offline and or even have an Azure subscription.

Features

API set

Azure Cosmos DB supports SQL API, as well as Table, MongoDB, Cassandra, and Gremlin which to me covers many scenarios from migrating an existing database from on-premise to Azure, modernising your legacy application, or create a brand new one. Azure Cosmos DB Emulator also supports these APIs although the underlying implementation details are different to the real service on Azure. In fact the emulator hides all abstractions from you and lets you focus on adding value to your team or organisation.

💡 However keep in mind that the data explorer provided with the service only supports SQL API at the moment.

Number of containers

The emulator allows you to create a single account with multiple (up to 25 fixed sized, or 5 unlimited) containers.

Operating System

At the moment, the emulator only supports 64-bit versions of Windows (Server 2012 R2, Server 2016, Server 2019, Windows 10) which demands a minimum of 2GB of RAM and 10GB of free disk space. You must also have administrative privileges to be able to install the client.

In addition to that, it also comes with docker image which you can use to run the emulator in a docker container but only on windows containers. If you want to use docker in Linux or macOS, you will need to use it on a Windows virtual machine.

Installation

Simply download the executable from here and install it on your Windows OS, if you’re running Linux or macOS or want to run it in a docker container please refer to the official documentation.

Differences

As amazing it looks, there are a few differences you need to keep in mind when working with the emulator:

As I mentioned before the data explorer only supports the SQL API. But you can use all other APIs from within your application using the SDK.
It only supports a single account with a well known key. You can change the key from command line, but you cannot change it in the explorer.
For now it only supports provisioning throughput mode only, meaning you can’t use it in serverless mode.
It does not support core features such as different consistency levels, scaling, replication and performance guaranties.
Since the client might not be up to date with Azure Cosmos DB service, make sure you always check the Azure Cosmos DB capacity planner to accurately estimate your required throughput.
And the minimum ID property size is 256 characters.

Summary

In this short article I just showed you the tip of the iceberg about what the Azure Cosmos DB Emulator has to offer for you. It’s a great utility to be able to develop applications who rely on Azure Cosmos DB locally and has helped me in my pet projects which doesn’t even need to work with a Cosmos DB instance. Keep an eye out for more articles on some use cases this amazing tool can help you with.

Add dual screen support to your applications 💻

Mon, 07 Dec 2020 00:00:00 GMT

If you have ever tried to add responsiveness to your web application you would know it’s difficult or at least takes a while to get it right. As progressive web apps (PWAs) are the first class citizens on many devices with the ability to get installed, it’s even more important to make sure user’s have the best experience possible. But technology advances in a much faster pace. We have now foldable devices like the shiny new Microsoft Surface Duo which add more complexity to this equation.

Problem

What if you wanted to show your page across two screens without hiding the content under the middle edge? At least for now we don’t have any device with bending glass to be able to not worry about what appears where on the screen.

In order to continue with this we need a demo application to make sure we’re on the same page. So let’s create one, say we have an image gallery which has 5 columns and someone is looking at it on their brand new Surface Duo:

Copy

<div class="gallery">
  <div class="grid">
    <div class="card">
      <img
        class="card-img-top"
        src="https://picsum.photos/200/200?random=5"
        alt="Card image cap"
      />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This card has supporting text below as a natural lead-in to
          additional content.
        </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card p-3">
      <img
        class="card-img-top"
        src="https://picsum.photos/200/200?random=4"
        alt="Card image cap"
      />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This card has supporting text below as a natural lead-in to
          additional content.
        </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img
        class="card-img-top"
        src="https://picsum.photos/200/200?random=3"
        alt="Card image cap"
      />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This card has supporting text below as a natural lead-in to
          additional content.
        </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img
        class="card-img-top"
        src="https://picsum.photos/200/200?random=2"
        alt="Card image cap"
      />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This card has supporting text below as a natural lead-in to
          additional content.
        </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img
        class="card-img-top"
        src="https://picsum.photos/200/200?random=1"
        alt="Card image cap"
      />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This card has supporting text below as a natural lead-in to
          additional content.
        </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img
        class="card-img-top"
        src="https://picsum.photos/200/200?random=7"
        alt="Card image cap"
      />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This card has supporting text below as a natural lead-in to
          additional content.
        </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img
        class="card-img-top"
        src="https://picsum.photos/200/200?random=8"
        alt="Card image cap"
      />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This card has supporting text below as a natural lead-in to
          additional content.
        </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img
        class="card-img-top"
        src="https://picsum.photos/200/200?random=9"
        alt="Card image cap"
      />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          This card has supporting text below as a natural lead-in to
          additional content.
        </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
  </div>
</div>

And in our CSS file we just put a 5 column layout for the card column like so:

Copy

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-row: auto;
}

Don’t worry too much about the code, you can view the result here on Glitch. Now to test how this page looks like you either have to have the device handy, or if you don’t have it like me, just use the Surface Duo Emulator which I find really cool. For example, here is how the page looks like at the moment:

You can see right away that it’s not a good look, I mean who would be willing to spend a second on this site? So how do we fix it? I think we’re now on the same page, so let’s dive in.

Solution

But don’t you worry, we’ve got you covered by two brand new experimental APIs that will enable you to effectively lay your elements on the screen where you want them to be.

The former along with a set of environment variables allows you to be aware of the geometry of the fold. The latter is an API which can be used alongside the media feature to work with non-DOM targets like Canvas 2D and WebGL.

Detecting display regions

As I mentioned earlier, the **screen-spanning** media feature allows you to be aware of the fact that the page is spanned across multiple display regions. But how do we use it? Let’s have a look at the syntax. At its core, you will have the ability to use the below media query:

Copy

@media (screen-spanning: <value>) { }

The allowed values are:

single-fold-vertical: which describes the state of the viewport, when it’s spanning across a single fold and the fold’s posture is vertical. This would mean the device is in double portrait mode like below:

Image from Microsoft Surface Duo blog

The code for this mode would be:

Copy

@media (screen-spanning: single-fold-vertical) { 
  /* styles applied in double-portrait (wide) mode */ 
}

single-fold-horizontal: which describes the state of the viewport, when it’s spanning across a single fold but this time the posture is horizontal. This would match the double portrait tall mode like below:

Image from Microsoft Surface Duo blog

Copy

@media (screen-spanning: single-fold-horizontal) {
   /* styles applied in double-landscape (tall) mode */
}

Environment variables

To get the geometry of the device fold, you could leverage the browser environment variables. You have access to four environment variables:

fold-top
fold-left
fold-width
fold-height

The picture below would nicely show you what there values represent:

Image from Microsoft Surface Duo blog

So let’s see how we can use these features to improve our user experience a bit. First we know that we’re using the single-fold-vertical mode, so we’ll add the relevant media query and play with the column count trying to either put the columns in the left or the right side of the fold:

Copy

@media (screen-spanning: single-fold-vertical) { 
.card-columns { 
  grid-template-columns: repeat(4, calc( env(fold-left) /2 - 10px) ); 
  } 
}

💡 In order to access these features, you must enable experimental platform features on Edge by visiting edge://flags/#enable-experimental-web-platform-features and enabling them.

After setting the column count to 4, we will end up with something like this:

So we’re one step close to have a better view, but we have the two middle columns right on the fold, and the title is spanning across too. Let’s fix the title first. We could simply set a width for it to be in the first fold, or we could give it a margin right calculating where the fold is located. Let’s use the margin solution.

Copy

h1 { 
  margin-right: calc( 100vw - (env(fold-left) + env(fold-width)) ); 
}

Here we’re calculating the width of the second fold and setting that as margin right for our header. Of course there are many other ways to achieve this, but I wanted to demonstrate the use of environment variables. After applying the above styles, we will end up with below, which is one step ahead to have a better UX.

Now is the time to fix the two middle columns. One way to fix the middle column problem is to add an empty column which has no content. But it’s easier said than done. If you’re willing to play with the width of the columns, you can get away with something like this:

Copy

@media (screen-spanning: single-fold-vertical) {
  .grid {    
    grid-template-columns: repeat(4, 23%);
    grid-gap: 25px;
  }
  .card:nth-child(4n + 2) {
    margin-right: 5px;
  }
  .card:nth-child(4n + 3) {
    margin-left: 10px;
  }
}

This will result in:

You can see we’ve come a long way from having a completely spanned content to a neat ordered view. But that’s all have been using only the CSS media feature. Let’s see what does the Window Segment Enumeration API have to offer.

Window Segments Enumeration API

This API helps you to deal with non-DOM elements such as a canvas or WebGL objects. You can leverage the getWindowSegments() function which is accessible on the window object and returns an array of one or more DOMRect representing the geometry of and position of each display region:

Copy

const segments = window.getWindowSegments();

// case 1: desktops, traditional touch screen devices, foldable device not spanned
console.log(segments.length) // 1

// case 2: dual-screen and foldable 
console.log(segments.length) // 2

If you wanted to know the fold posture inside your JavaScript code, you can calculate them easily using below snippet:

Copy

function isSingleFoldHorizontal() {
    const segments = window.getWindowSegments();
    if( segments.length !== 2 ) {
        return false;
    }
    if( segments[0].top < segments[1].top ) {
        return true;
    }
    return false;
}

Here we’re simply retuning false if the segments are now two, then check whether the top value of segment 0 is less than segment 1 which means the device is in horizontal state. If not we’re returning false which means it’s vertical posture.

Where to start?

You can access the CSS screen-spanning media features using the experimental web platform feature flag, and the JavaScript Window Segments Enumeration API is accessible by enabling the Experimental JavaScript flag.

You also have the option of using Origin Trials, where you can acquire tokens and safely experiment with these new primitives in production in exchange for providing feedback about the APIs. Sign up for an Origin Trial if you’re interested in testing out these APIs!

PS: You can find all the the code on Glitch here.

How to use Azure Cosmos Emulator as a local MongoDb database 🌍

Mon, 30 Nov 2020 00:00:00 GMT

I recently was trying to prepare a demo which involved me having a local MongoDb database. I reviewed a few options and was about to choose one when I remembered I have Azure Cosmos DB Emulator installed and Cosmos DB supports MongoDb APIs.

Install if you haven’t already

You will need below requirements to be able to install the emulator:

Windows Server 2012 R2, Windows Server 2016, 2019 or Windows 8 and 10. Docker on Windows, Linux and macOS is also supported.
64-bit OS.
Minimum 2GB RAM.
At least 10GB available hard disk space.

If you’ve ticked all of above already, then head over here and install the latest version. If you stumbled upon any issues use the troubleshooting guide to find out what’s happening.

💡 Make sure you check for updates regularly since each new version might contain new features and bug fixes.

Starting the emulator

Normally you would use the Windows start menu to find your programs and start the application, however, for the emulator to support MongoDB APIs, you will need to pass the EnableMongoDbEndpoint argument.

You have a few options here:

Create a shortcut and pass the required arguments
Use command line to start it

I am going to use Windows Terminal. Run the below command to fire up the emulator with MongoDB support:

Copy

& 'C:\Program Files\Azure Cosmos DB Emulator\CosmosDB.Emulator.exe' /EnableMongoDbEndpoint

You will be prompted to approve the emulator making changes to your system and once approved, you will see the emulator starting and the interface will open in your default browser.

Getting the connection string

The very first thing you’d see is the quick start which should look something like this:

What you’ll need is the Mongo Connection String. Copy that you’ll be ready to kick start. I am going to use the Node sample from the quick start to continue the rest of this guide, but you can use this straight away in your current code.

Creating a Node.js Web API project

Open up a command prompt in a new folder and initiate a project:

Copy

npm init -y

The next thing to do is to install the dependencies:

Copy

# linux or macOS
touch app.js

# Windows
echo "" > app.js

# install dependencies
npm install express mongodb body-parser

The app

We would have a simple application, since this tutorial is not a Node.js or Express.js focused, I will just brush on some steps here. Feel free to go through and understand each of these at your own pace.

Copy

const Express = require("express");
const BodyParser = require("body-parser");
const MongoClient = require("mongodb").MongoClient;
const ObjectId = require("mongodb").ObjectID;
var app = Express();
app.use(BodyParser.json());
app.use(BodyParser.urlencoded({ extended: true }));
app.listen(5000, () => {});

What we have here is a simple web server which responds to http://localhost:5000. All we’re doing is initializing the MongoClient and a web server. Next thing we need to do is to establish a connection with MongoDB interface of our emulator:

Copy

const Express = require("express");
const BodyParser = require("body-parser");
const MongoClient = require("mongodb").MongoClient;
const ObjectId = require("mongodb").ObjectID;
const CONNECTION_URL = "YOUR CONNECTION STRING";
const DATABASE_NAME = "cosmos_emulator_mongo";


var app = Express();
app.use(BodyParser.json());
app.use(BodyParser.urlencoded({ extended: true }));
var database, collection;

app.listen(5000, () => {
    MongoClient.connect(CONNECTION_URL, { useNewUrlParser: true }, (error, client) => {
        if(error) {
            throw error;
        }
        database = client.db(DATABASE_NAME);
        collection = database.collection("celebrities");
        console.log("Connected to `" + DATABASE_NAME + "`!");
    });
});

The next thing we do to make it simpler to run the app is to add a start script to our package.json:

Copy

"scripts": {
    "start": "node app.js"
}

If you run npm start now, you should see the message connected to Connected to 'cosmos_emulator_mongo' printed on your console which means you’ve successfully connected to the MongoDb APIs.

Seed the database

First let’s create a JSON file which contains some celebrities 😎:

Copy

[{
  "age": 18,
  "birth_place": "Harij, Gujarat, India",
  "birth_sign": "Pisces",
  "birth_year": "1996",
  "birthday": "September 28",
  "name": "Daxeel Soni",
  "occupation": "Developer of this API. More: www.daxeelsoni.in",
  "photo_url": "http://daxeelsoni.in/images/me.jpg"
}, {
  "age": 28,
  "birth_place": "Houston",
  "birth_sign": "Libra",
  "birth_year": "1987",
  "birthday": "September 28",
  "name": "Hilary Duff",
  "occupation": "TV Actress",
  "photo_url": "http://www.famousbirthdays.com/thumbnails/duff-hilary-medium.jpg"
}, {
  "age": 38,
  "birth_place": "Columbia",
  "birth_sign": "Libra",
  "birth_year": "1977",
  "birthday": "September 28",
  "name": "Young Jeezy",
  "occupation": "Rapper",
  "photo_url": "http://www.famousbirthdays.com/thumbnails/jeezy-young-medium.jpg"
}, {
  "age": 48,
  "birth_place": "Roanoke",
  "birth_sign": "Libra",
  "birth_year": "1967",
  "birthday": "September 28",
  "name": "Challen Cates",
  "occupation": "TV Actress",
  "photo_url": "http://www.famousbirthdays.com/thumbnails/cates-challen-medium.jpg"
}]

Now that we have our JSON file, let’s seed the database. Replace the initial connect code with this:

Copy

app.listen(5000, () => {
  MongoClient.connect(
    CONNECTION_URL,
    {
      useNewUrlParser: true,
      sslValidate: false,
    },
    (error, client) => {
      if (error) {
        throw error;
      }
      database = client.db(DATABASE_NAME);
      collection = database.collection("celebrities");
      collection.estimatedDocumentCount({}, (erorr, numOfRecords) => {
        if (numOfRecords <= 0) {
          fs.readFile("./info.json", "utf8", (err, data) => {
            if (err) {
              console.log(`Error reading file from disk: ${err}`);
            } else {
              // parse JSON string to JSON object
              const celebrities = JSON.parse(data);

              collection.insertMany(celebrities, (error, result) => {
                if (error) {
                  console.log(`Error in saving seed data: ${error}`);
                }

                console.log(`Seed data inserted into the database!`);
              });
            }
          });
        } else {
          console.log(`Connected to database`);
        }
      });
    }
  );
});

All we’re doing here is to get the number of records in the collection and if there is nothing, read the JSON file and write it to the collection.

Don’t forget to add const fs = require('fs') at the top with other require statements.

Now if you run npm start would should see the application start and then the seed data inserted message.

Creating the endpoint

And now all we need is to add our get endpoint to be able to fetch our celebrities. Don’t forget to add it before you create your listener:

Copy

app.get("/api/celebrities", (request, response) => {
    collection.find({}).toArray((error, result) => {
        if(error) {
            return response.status(500).send(error);
        }
        response.send(result);
    });
});

Testing the application

You’re now ready to get your celebrities via the API. Simply open a browser and head over to http://localhost:5000/api/celebrities or just use the below command:

Copy

curl -X GET http://localhost:5000/api/celebrities

Summary

In this guide we saw how to use Azure Cosmos DB Emulator with MongoDb API to have a local MongoDb available for our local development and proof of concepts. Hope this has helped you save some time and also the trouble of installing yet another software on your system (of course if you already are using the emulator 😊).

Enjoy hacking and let us know what awesome projects you’re doing using the emulator.

PS: You can find the finished code in my GitHub repository here.

Access your clipboard on your other devices 😍 📋

Fri, 13 Nov 2020 00:00:00 GMT

How many times have you been working on multiple systems and realised you are trying to paste something which you have copied on the other system? Well with the help of this article you can now share your clipboard between your Windows and Mac devices 😎.

Windows to Windows

If you have multiple windows devices, it’s very easy. Simply open your control panel and search for Clipboard Settings.

Once opened, set the Sync across devices option to on. If you want to prevent sensitive data to be synced and do it on a case by case basis, set the Never automatically sync text that I copy option to on instead.

While you’re at it, turn clipboard history on too to have a beautiful clipboard history available by pressing Win+V.

Use the copied text

Now if you copy something into your clipboard, based on assuming you wanted to sync everything, simply paste, or open your clipboard history on the target device to see it.

⚠️ If you selected never automatically sync option, you can press Win+V to open up your clipboard history and select what you want to be synced across your devices after copying the items.

Additional tip

If you choose to use clipboard history, make sure you pin items you use frequently to save yourself some more time too.

Mac to Mac

If you’re a Mac user and want to achieve the same, you can use the Universal Clipboard.

It’s really simple, like we saw on windows setup.

Windows/Mac/Linux to Mac/Windows/Linux

If you use two different operating systems and want to simply share your content across, nothing works better than PASTEBIN.

This is a web tool that allows you to share your content across different devices with ease.

Warning

When using third party software whether it’s application or web app, never share secrets or your personal information.

Summary

We saw how to take some simple steps to increase our productivity and access any content we would like across our devices. Hope you benefit from this like I did and see you next time.

I've joined Microsoft as an Azure Technical Trainer 🗺️ 😍

Mon, 02 Nov 2020 00:00:00 GMT

The cat is out of the bag now, I’ve joined Microsoft as an Azure Technical Trainer. Some of you might be wondering why, and if so, this post is for you. I’ve decided to write down why I’ve made this decision and a bit about my 15+ years journey from high school to where I am now.

PS: We don’t have a Microsoft campus in Melbourne, but it didn’t prevent me photoshopping myself in 😜. Also, Satya Nadella was another motivation for me to join since we have a decent resemblance 😎.

Background

I started to write small programs when my brother bought a PC back in 1998. It was running MS-DOS and the first program I wrote could print a pyramid with stars on the console and was written in QBasic. From then, I was always amazed by people who write programs which can help others write their own, and working at Microsoft became one of my dream jobs.

Later on, I progressed through high school, pre-uni and then uni when I started my journey as a software engineer. I’ve started with C++, Turbo Pascal, FoxPro, Delphi, ASP Classic, PHP, and many other languages and ended up with, and finally ASP.Net MVC.

Throughout those years I became really interested to web development and have been active in that area so far. Of course that wasn’t the only thing I picked up, I have written windows desktop apps with ASP.Net web forms and Java Spring, Java Card applets to work with HSM and physical security devices, ActiveX, and many more I can’t even remember, not because I didn’t like them, but because I was really into learning new things and there were too many out there.

I wasn’t born in a wealthy family, so I had work summers and other free times to earn enough to go through my studies for the rest of the year. And we don’t have big companies represented in Iran, so working for Microsoft was became a wish in my bucket list.

Post uni

When I graduated from University with a Master’s degree in Information Security, I was hired by one of the well known software companies who were involved in banking industry. From there, I had jobs as software engineer, team lead and line manager and eventually I became the software engineering lead for one of the private banks’s PSP (payment service provider) company. But throughout all those years, I was on the lookout for an opportunity to migrate to another country and continue my professional career there.

Migrating to Australia

We considered Canada, US, and a few countries in Europe, but ended up pinning Australia on the map because of a few different reasons which suited our lifestyle and goals. So we sold/gave away most of our household items, rented out the apartment and packed our suitcases, jumped on a plane and ended up in Melbourne, Australia in 2015. I don’t want to go through how we got the Skilled Visa because it’s simply too long and brings back many not so good memories.

First job here

I immediately started applying for jobs here and without surprise, I was getting many calls, but not an actual opportunity that I liked. After one week, I had to bring down my expectations and start from scratch. I applied for a mid-level developer at a company and got in. This was after 3 weeks from our arrival and believe it or not is a record time for migrants to get a job.

Moving into consulting and public speaking

I didn’t stay there for long, as I didn’t want to waste any time following my goals. So I got into a consulting firm and eventually joined Readify (one of the best consulting firms in Australia) back in 2016. Because of my love for knowledge sharing, I got into public speaking starting from local meetups ended up at international conferences around the world. I am super proud of what I’ve achieved throughout these years and owe a big part to Readify and later on Telstra Purple. However, I still had my bucket list getting dust and wasn’t enjoying what I was doing as my full time job.

Decision to shift to developer advocacy

I was doing conference talks, blogs, and was involved in development community which has been a real pleasure, but managing all of that while having a full time job was really tough. So I started to search for similar roles and came across developer advocacy. However, this not a role which is very well known in Australia apart from big companies like Microsoft, Amazon AWS, IBM etc and some smaller ones like Auth0 and Twilio. I had a few discussions with different people to get an idea of what’s required to be able to score one of those jobs, but didn’t get a chance to find and apply for one.

When an opportunity presents itself

So I continued what I was doing, but still were on the lookout for something interesting which could help me do what I love to do. A few weeks back one of my friends who also works at Microsoft told me about a position on the Azure Technical Training team and I thought that’s something I would be really good at. It would be a bit of shift from web development, but the pros (working at Microsoft, sharing knowledge, and being close to what I love to do) convinced me to apply. I went through the interview and got an offer which made my year. This year has been really tough for me and my family and this event really helped us recover from these last few months of stress and anxiety.

Summary

So here I am, employed by my dream company, and doing what I love to do. It couldn’t have ended up better than this, I’ve already talked to my manager and he knows and supports my passion to be involved in development community, so this doesn’t mean I won’t be active on conferences and blog posts anymore. This amazing opportunity will help me grow in many ways as working at Microsoft and working with so many talented and amazing people would.

I just hope this has inspired a few of you fellow developers out there to never give up hope and follow your dreams however distant and impossible they seem 🤘🏽 💪🏽.

Get started with Vue 3 and Tailwindcss

Thu, 22 Oct 2020 00:00:00 GMT

Last week I wanted to setup a Vue.js v3 app with Tailwindcss and although many articles exists for that, I couldn’t get it done. The fact is that you need to use postcss to get your setup working, but with new version of Vue, the postcss config file is not picked up. So after a few try and errors, I finally got it working and thought to jot down what I went through to make it easier for my future self, and hopefully a few of my fellow developers around the world.

Vue CLI

You can setup your Vue project with simply importing the script tag and start coding, but I normally like to use Vue CLI to get started because it takes care of the many things for me and gives a really good starting point.

So let’s start by installing Vue CLI if you don’t have it already:

Copy

npm install -g @vue/cli
# OR
yarn global add @vue/cli

This will install the Vue CLI for you and once that’s done, you’d be ready to create your project. If you already have CLI installed, make sure you update it first to get support for Vue v3 preview.

Creating the project

In order to create your project, you need to call the CLI and give your project name:

Copy

vue create vue-tailwindcss

This command will start the wizard and asks you what version of Vue you want to use and what additional options you want to have.

You can choose between default seetings, or making a completely custom setup. I will normally choose custom which gives me more freedom as to what I want to setup.

From here press Entre on Choose Vue version, and select 3.x (Preview).

I would normally choose TypeScript, Babel, Linter, Unit and E2E testing optiuons, but feel free to setup how you like.

When it’s done go navigate into the folder or open it up with your editor of choice. Mince is VS Code.

Installing the required dependencies

At this point we need to install Tailwindcss:

Copy

npm install tailwindcss

Create your style file

At this stage you’re ready to create your style file. I will put it next to my main.js for convinience.

Don’t forget to import it inside your main.js file:

Copy

import "./main.css";
// ...

And now is the time to import the Tailwincss base and components in our css file:

Copy

/* src/main.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Postcss configuration

Many articles tell you to create a postcss.config.js or .postcssrc.js and set your config there, but with the new version of Vue CLI this doesn’t get picked up. For this part we simply need to update our package.json file:

Copy

"postcss": {
  "plugins": {
    "tailwindcss": {},
    "autoprefixer": {}
  }
}

Import Tailwindcss components

You’re ready to use the Tailwindcss components now. So open up your hello-world.vue file and paste this code from their free gallery in:

Copy

<!--
  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
  Read the documentation to get started: https://tailwindui.com/documentation
-->
<div class="relative bg-white overflow-hidden">
  <div class="max-w-screen-xl mx-auto">
    <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
      <svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon points="50,0 100,0 50,100 0,100" />
      </svg>

      <div class="relative pt-6 px-4 sm:px-6 lg:px-8">
        <nav class="relative flex items-center justify-between sm:h-10 lg:justify-start">
          <div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
            <div class="flex items-center justify-between w-full md:w-auto">
              <a href="#" aria-label="Home">
                <img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="Logo">
              </a>
              <div class="-mr-2 flex items-center md:hidden">
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu" aria-haspopup="true">
                  <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <div class="hidden md:block md:ml-10 md:pr-4">
            <a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Product</a>
            <a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Features</a>
            <a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Marketplace</a>
            <a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Company</a>
            <a href="#" class="ml-8 font-medium text-indigo-600 hover:text-indigo-900 transition duration-150 ease-in-out">Log in</a>
          </div>
        </nav>
      </div>

      <!--
        Mobile menu, show/hide based on menu open state.

        Entering: "duration-150 ease-out"
          From: "opacity-0 scale-95"
          To: "opacity-100 scale-100"
        Leaving: "duration-100 ease-in"
          From: "opacity-100 scale-100"
          To: "opacity-0 scale-95"
      -->
      <div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
        <div class="rounded-lg shadow-md">
          <div class="rounded-lg bg-white shadow-xs overflow-hidden" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
            <div class="px-5 pt-4 flex items-center justify-between">
              <div>
                <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="">
              </div>
              <div class="-mr-2">
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Close menu">
                  <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            </div>
            <div class="px-2 pt-2 pb-3">
              <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Product</a>
              <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Features</a>
              <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Marketplace</a>
              <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Company</a>
            </div>
            <div>
              <a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100 hover:text-indigo-700 focus:outline-none focus:bg-gray-100 focus:text-indigo-700 transition duration-150 ease-in-out" role="menuitem">
                Log in
              </a>
            </div>
          </div>
        </div>
      </div>

      <main class="mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
        <div class="sm:text-center lg:text-left">
          <h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
            Data to enrich your
            <br class="xl:hidden">
            <span class="text-indigo-600">online business</span>
          </h2>
          <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
          </p>
          <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
            <div class="rounded-md shadow">
              <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
                Get started
              </a>
            </div>
            <div class="mt-3 sm:mt-0 sm:ml-3">
              <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline-indigo focus:border-indigo-300 transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
                Live demo
              </a>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
  <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
    <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="">
  </div>
</div>

Run the application

You’re all set, run npm run serve and when the CLI is finished compiling the app, open a browser window and head to https://localhost:8080 to see the Tailwindcss component:

Customisation

If you want to customise any of the default styles, you need to modify the theme. To do so, run:

Copy

npx tailwind init

This will create a tailwind.config.js file for you in the root of your directory. To demo an example customisation, let’s say we want to add some space between the photo and the right hand side of the page. Currently the photo is having an position:absolute and right:0 because it has the lg:right-0 class.

So we want to add a new class which has 10% margin on the right hand side of the image. For that to work, we will need below code in our tailwindcss.config.js:

Copy

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    inset: {
      '0': 0,
      auto: 'auto',
      '1/10': '10%',
    },
    extend: {},
  },
  variants: {},
  plugins: [],
}

Pay attention that I’ve added a 1/10 with the value of 10% which we can use. Now all we need to do is to add lg:right-1/10 to the image container which pushes the image to the left by 10%:

Copy

<div class="lg:absolute lg:inset-y-0 lg:right-1/10 lg:w-1/2">
</div>

And now it should look like this:

Summary

We saw how to add Tailwindcss library to our Vue 3 application created by Vue CLI. Hopefully this will help some of you out there facing the same issue as me. See you next time 👏🏽.

You can find the code in my GitHub repository.

Do you know about PowerToy Utilities? 💪🏻

Fri, 09 Oct 2020 00:00:00 GMT

If you’re a windows user like me, you might have heard of PowerToys Utilities from Microsoft. They are a set of utilities which come handy in many situations, but not many people know and use them. So I thought let’s write how and when I use them to help other people be more efficient too.

PowerToys utilities

Microsoft PowerToys are a set of small applications which helps windows users streamline their day to day activities and windows experience for greater productivity. However, these are not new. There were a set of tools in Widows 95 (yes I’m that old) which inspired this project.

Installation

Simply head to the Downloading and Release notes section on their GitHub repository, download the version you’re after and install it using its installer.

The latest version as of writing this article is v0.23.0. Once you get it installed, it will update itself on a regular basis.

So let’s see what are these and how you can use them.

Color picker

Color Picker is a handy little tool which allows you to pick a color from anywhere on your screen. As a web developer there are many times when I want to get the hex or rgb value of a background color, border, or other areas.

I used to use browser DevTools, but they only help you within the browser and if you want something from a document, picture or other files on your file system, then this tool will come in handy.

If you haven’t customised the default shortcuts, press Win + Shift + C to open the picker. Once opened, you can use your mouse scroll to zoom in and left click to copy the value to your clipboard.

Fancy zones

Fancy Zones allows you to create complex window layouts and quickly position your windows into those. This comes really handy if you have a super wide monitor setup.

To open it, press Win + ` and select your desired layout from the opened window. Once selected you can arrange your windows into those areas by pressing Win + ⬅ or Win + ➡.

💡 If the arrow keys didn’t work for you, simply select the option to override windows shortcuts in the settings. You can access the settings from clicking the PowerToys icon in your toolbar.

File explorer add-ons

File Explorer add-ons will enable SVG icon rendering and markdown preview for your file explorer. To see your preview pane simply click the view menu and click the preview pane.

Image resizer

Image Resizer is a really cool shell extension which allows you to quickly resize images. Simply right click on your image or images and resize them instantly.

keyboard manager

Keyboard manager allows you to create your own keyboard layout to increase your productivity. You can map keys and mix them however you like, of course you would need a keyboard with detachable key caps for a better use.

Open PowerToys settings and click on keyboard manager menu. First thing first, make sure it’s enabled.

Remap keys

If you want to remap a key, click on the remap keys, then click + button to add a key and then select what key you want that mapped to.

You can also map a single key to a shortcut, for example map V to Ctrl + V.

💡 Just remember that when you map a key to a shortcut, the combination remains even as part of other key presses. So if you’ve mapped V as above, then pressing Ctrl + V now means you’ve pressed Ctrl + V + V.

Remap shortcuts

You can map shortcuts as well, to do so, click on the remap a shortcut button and follow the same procedure. You can click on type button to press multiple keys and at the end you can specify which application this shortcut remap applies to.

PowerRename

PowerRename is another shell extension for balk renaming of files which offers search and replace and supports regex.

Select and right click on multiple files or folders, then click PowerRename. From the opened dialog, select your desired options and once you’re happy, click rename.

PowerToys run

This one is my favourite. It brings back the memories of the days we used to install add-ons on windows XP and 7 to add these sort of functionalities. First, make sure it’s enabled in the settings, and then press Alt + Space. A pop up will open and you can search for your application.

💡 Since I use this shortcut to select my open window to be able to move it between my monitors, I’ve set my shortcut to Ctrl + Alt + Space.

Shortcut guide

Shortcut guide is a quick and easy way to savailable shortcuts for the current state of the desktop. You can open it by pressing and holding down your Win key for 1 second.

Summary

Hopefully these tools will help you as much as they helped me. Have a great weekend ahead and till next article 👋🏻.

Find an item in an array with the new 'findIndex' method 🔎

Mon, 05 Oct 2020 00:00:00 GMT

Searching for items in an array has been the point of discussion for many years and debate on what is the best and optimum way for searching for objects has had many solutions, some effective and some not.

However, with the all new findIndex method on Array.prototype you have the flexibility to search for objects using your own comparison callback method.

The what

The findIndex method returns the index of the first element in an array if the callback method passed to it returns true, otherwise it returns -1.

Copy

const isPerfectSquare = (num) => {
  return num > 0 && Math.sqrt(num) % 1 === 0;
}

console.log([1, 3, 8, 9, 12].findIndex(isPerfectSquare)); // 1
console.log([1, 6, 7, 10, 14].findIndex(isPerfectSquare)); // -1

There are two facts you should know:

This method does not run once it found the first matching element.
It does not change the original array.

Syntax

Copy

array.findIndex(function(currentValue, index, arr), thisValue);

Parameters

function: This is your callback function which checks for a condition to match the element you’re after.
currentValue: This holds the current element’s value.
index: This is an optional parameter which holds the current index.
arr: This is also an optional parameter which holds the array that the current element belongs to.
thisValue: Yet another optional parameter, if a value is passed, it will be used as this value inside the function, otherwise undefined will be passed.

Return value

It will return the index of the found item or -1 if the callback function is not satisfied.

How it works under the hood?

When the findIndex is called with one or two arguments, the following steps are executed:

Let O be ? ToObject(this value)
Let len be ? LengthOfArrayLike(O)
If IsCallback(predicate) is false, throw a TypeError exception
Let k be 0
Repeat, while k < len
Let Pk be ! ToString(k)
Let kValue be ? Get(O, Pk)
Let testResult be ! ToBoolean(? Call(predicate, thisArg, « kValue, k, O »))
If testResult is true, return k
Set k to k + 1
Return -1

Take a selfie 🤳 using Image Capture API and a few lines of code

Sun, 06 Sep 2020 00:00:00 GMT

It’s been a while since I last wrote about Intersection Observer V2, partly because I had a lot on my plate and I was feeling exhausted and partly because I was working on my first PluralSight course on web performance for PWAs.

But I am back, and this time we’re going to review how to take a selfie from your webcam using Image Capture API.

Image Capture API

There are some really useful APIs which allow us to work with media like audio, video, etc. I will write about those too, but this time I wanted to show you how you can extract a frame from your video feed such as your webcam with a few lines of code.

Image Capture API enables us to capture an image or frame from video devices. In addition to capturing data, it also allows you to retrieve information about device capability such as image size, red-eye detection and whether or not there is flash turned on.

Usage

We need to take some actions to be able to work with media devices. First thing first we need to get a reference of the device:

Copy

navigator.mediaDevices.getUserMedia({ video: true })
  .then(mediaStream => {
    // Do something with the stream.
  })

Next we need to get the visual parts of the media stream by calling getVideoTracks method of the mediaStream object:

Copy

const track = mediaStream.getVideoTracks()[0];

Of course we’re assuming that the first item in the array is the one you want to use, but don’t worry if not, you can loop through all the tracks, find the one you need and either get it with its right index, or by calling getTrackById method.

After we’ve got our track, it’s time to capture our image. If you wanted to configure some of the settings on your media device such as zoom level, you need to do it now before capturing our image:

Copy

const capabilities = track.getCapabilities();
// Check whether zoom is supported or not.
if(!capabilities.zoom) {
  return;
}

const zoom = capabilities.zoom.max - capabilities.zoom.min;

track.applyConstraints({ advanced : [{ zoom: zoom }] });

When we’re done with settings, we can then create an instance of the ImageCapture object:

Copy

let imageCapture = new ImageCapture(track);

Once that’s done, you can capture an image from your video feed by calling the takePhoto method:

Copy

imageCapture.takePhoto()
  .then(blob => createImageBitmap(blob))
  .then(imageBitmap => {
    // do something with the photo
  })
  .catch(error => console.error(error));

Permissions

Similar to other APIs you would need permission to be able to access the webcam on devices. If you didn’t see any pop up, make sure you give the camera permission to the site on your browser to be able to get your code working properly. You can try that with below demo.

Demo

You can see a working example of this in my CodePen below:

See the Pen Image Capture API by Yaser Adel Mehraban (@yashints) on CodePen.

I hope you’ve learnt a new thing or two and till next time 👋🏽.

Introducing the Intersection Observer V2 ⛌

Mon, 22 Jun 2020 00:00:00 GMT

As I mentioned in one of my other posts, Intersection Observer will report when an element appears in the viewport, after applying all overflow and CSS clips. However, there is no way currently to find out whether an item is being put on top of this element, or some filter is applied to it which may alter or obscure the element’s display.

Context

Intersection Observer is now widely used by developers especially since Safari added support a while back and it’s now available in all major browsers. If you want to be notified when an element appears in the viewport such as an image, if you want to lazy load it you can use this API. In its most basic form the code looks like this:

Copy

const logIfIsInViewPort = (entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log(entry);
    }
  }
};

const observer = new IntersectionObserver(logIfIsInViewPort);
observer.observe(document.querySelector('.element-selector'));

The problem

As great as it sounds, this API is not perfect. For example it can’t tell you whether or not an element is covered by another content (which is called occluded), or if a filter is applied to it to hide or obscure it’s content (such as opacity, filter, transform, etc.).

This can lead to dangerous situations where some people might do fraud or abuse the web. So Intersection Observer V2 was born to prevent these types of scenarios.

Intersection Observer V2

As I said, the primary motivation for this API is to prevent those situations where a fraud might be possible, or people could abuse the user’s privacy in a way especially if the said content is put in an iframe.

Intersection Observer V2 works by tracking the actual visibility of the element, just like the end user would see it. By passing an option to it’s constructor, the collection of IntersectionObserverEntry will contain a new boolean called isVisible.

Copy

const handler = (changes) => {
  for(const change in changes) {
    // feature detection
    if(typeof change.isVisible !== 'undefined') {
      if(change.isIntersecting && change.isVisible) {
        console.log(`Visible since ${change.time}`);
      } else {
        // fallback to v1 if not supported
        change.isVisible = true;
      }
    }
  }
}

const observer = new IntersectionObserver(handler, {
  threshold: [1.0],  
  trackVisibility: true, // this will give you the isVisible property
  delay: 100
});

observer.observe(document.querySelector('.target-element-selector'));

Additional parameters

The object which is passed in the constructor has a few properties:

threshold: A list of thresholds which will trigger a callback.
trackVisibility: A boolean indicating whether or not to track the visibility of the element.
delay: A number defining the minimum delay in milliseconds between notification for a given object.

💡 Note that tracking visibility is an expensive operation and should only be used when necessary. The performance implications can cause more harm than good if abused.

How does it determine visibility?

Determining whether the element is visible or not is not as simple as you might think. Based on the spec:

If false is passed as the value of trackVisibility, the element is considered visible.
If the target element has an effective transformation matrix other than 2D then the element is considered invisible.
If the target element or any of its children, has an effective capacity other than 1.0, then it’s considered invisible.
If the target element or any of its children has a filter applied, then it’s considered invisible.
If the browser cannot guarantee the target is fully visible, then it’s considered invisible.

What’s the catch?

This is in a draft state and still work in progress. Apart from Chrome, none of the other major browsers currently support it.

Summary

Although this hasn’t been implemented in most browsers yet, it’s a great tool to prevent some of the common attacks such as clickjacking or likejacking, or cursorjacking.

Chrome - where did save sessions go? 🤔

Wed, 17 Jun 2020 00:00:00 GMT

I remember a while back (not sure how long), Chrome had the ability to save all tabs when you closed the browser regardless of whether it was by accident or not. But they removed that ability and now if you close the window you will lose the tabs.

What now?

Well there are still some ways you can save your current tabs and open them next time you open a new Chrome window.

1. Small hack but works (most times 😁)

Open your task manager and kill the Chrome’s task. It’s a dirty hack but it works. When you open Chrome next time it asks you do you want to restore the last session and when you click the button, it will open all of your previously open tabs.

So first kill the task:

Later when you open a new window:

2. Save them as bookmarks

Yes, you read right. You can save all open tabs as bookmarks and open them all later when you come back. Simply press Ctrl + Shift + d in windows or ⌘ + Shift + d in Mac to save all your open tabs in a new bookmark folder.

Later on when you come back and open a new window, you can right click on the folder you created previously and select open all tabs:

⚠️ This technique won’t help you if your browser crashes for some reason.

3. I am too tired to do all of that

If you don’t want to open your task manager, or don’t want to use bookmarks, don’t worry. There are some extensions which can help you with that.

Tab Session Manager

Tab Session Manager is a Chrome extension which allows you to do:

Save and restore windows and tabs
Manage sessions with name and tags
Auto save when window is closed
Auto save at regular intervals
Import and export sessions
Compatibility with Firefox extension
Cloud sync

It also has Microsoft Edge and Firefox versions which is great.

Session Buddy

Session Buddy is a popular extension with more than 24K installs. It will do all of the above for you automatically in one place. Whether your browser crashes or you choose to close it manually.

Summary

Hope this helps you from a possible disaster if you have millions of tabs open at a time. If you are a tab person, check out my other article on managing your tabs in Chrome here. Until next time, 👋🏽.

Chrome - Arrange your tabs with tab groups 😍

Mon, 15 Jun 2020 00:00:00 GMT

If you’re one of those people with so many tabs open than you can manage, read on.

The why

For those of you who have many tabs open all at the same time and are struggling to keep a tab on your tabs, the time has come to get a bit more organised using this new feature in Chrome called tab groups.

The whole purpose has been to help users keep their tabs organised and easier to find them in their sea of open tabs.

How can I do it?

Simply right click your tab and select Add tab to tab group option. Then there will be a dot right before your tab. Click on the dot, a pop up will open in which you can select a colour for your tab group, and name your group.

If you are clicking on an existing group, you will have the following options in addition:

Add a new tab to the group
Ungroup tabs in a group
Close group
Move the group to a new window
Send feedback if you have any

I’ve demonstrated this in below video:

But I don’t see the option

If you can’t see the option, don’t worry, just go to chrome://flags, then search for tab groups and enable the option. It’s still experimental, but you can use it now.

Summary

Hope this will help you to keep a tab on your tabs and till next time 👋🏽.

Did you know about scroll to text? 📜

Sun, 14 Jun 2020 00:00:00 GMT

You probably have used fragments in links to point a link to a part of your page such as a heading. This technique is used in table of content for example and it’s a common pattern.

Background

To extend the current support for scrolling to an anchor element in a page, the W3C have proposed a solution which basically adds the ability to link to a DOM element with id, or textual content on a page to make it easier for browsers to understand what the users are interested and scroll there when they visit the page. In addition to make it visually easier to follow, they have added the highlight to the text so that users will know where to look at on first sight.

Scroll to Text Fragment

So that’s how Scroll to Text Fragment was born. It has been shipped to Chrome and Microsoft Edge called Scroll to Text Fragment which allows you to link to a specific text on a page, using a fragment provided in the URL. When the page is loaded, the browser highlights the text and scrolls it into view.

This is the generic syntax:

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
          context  |-------match-----|  context

💡 Square brackets indicate an optional parameter.

Here is an example:

Copy

<a href="https://yashints.dev/#:~:text=Meet&text=Yas">
  Click to go to a specific portion of a page
</a>

And you can test it live by clicking here.

If you want to target an exact text:

Copy

<a href="https://yashints.dev/#:~:text=almond%20croissant%20addict">
  Click to go to a specific portion of a page
</a>

Try it here.

You can also add an end text in which case the text directive refers to a range of text on the page.

Copy

<a href="https://yashints.dev/#:~:text=Although,web%20developer">
  Click to go to a specific portion of a page
</a>

Try it here.

Use cases

Search engines

When search engines will link to pages which contain relevant information to the query, they will scroll and highlight that so the user will find it easier.

Citation / Reference links

Links are sometimes used as citations on some pages where the author wishes to enforce a claim by pointing to a reference such as Wikipedia. These reference pages can contains large chunks of text and finding the information can be difficult. So having the ability to scroll to that section and highlight it is really encouraging to readers to follow the links.

Sometimes you want to share a piece of text to someone for example by email or on social media, it’s really helpful to be able to link directly to the specific section rather than the whole page.

Nowadays people share short snippets directly in tweets or create screenshots which can contain more text and post those. With this they won’t need to do that since links can be more meaningful.

Summary

And that’s how the web is moving towards a better place where users are the centre of attention for us developers and the more we know how to make their lives easier the more they trust us to take care of it for them.

Enjoy your evening and till next time 👋🏽.

Links and JavaScript 🔗

Wed, 03 Jun 2020 00:00:00 GMT

I see some occasions where web developers who are a bit less familiar with accessibility use links incorrectly in different forms. So I thought let’s write a quick guide on Links in JavaScript apps.

Background

It’s safe to assume that anyone who’s used the web have seen them. They take users from one page to another either within the same application or to an external website. There were really hot when they were introduced back in 1966 by a team led by Douglas Engelbart.

In the early 1980s Ben Shneiderman, a computer scientist at the University of Maryland, with his graduate student Dan Ostroff were preparing a videodisk exhibit for a museum. It was then where they used a caption that had all the information and users could click on it to see the photo associated with it.

At first, this discovery was called embedded menu but that term was quickly replaced by hyperlink. Tim Berners-Lee cited Shneiderman’s hyperlink work in his spring 1989 manifesto for what would become the World Wide Web.

Back then, this feature was super hot and it still is. People use it without even thinking about it and it’s become a natural part of the web.

Enough background, tell me what’s this all about

Let’s review what they do:

As mentioned before they allow users to navigate between pages within a site or to an external one.
And more importantly they help search engines and bots to find resources and going from one page to another by following the links. Think of this as a giant maze where they need to blindly follow the links to discover stuff.
And last, the crawlers use them to understand the architecture of a site and the type of content they have. It’s a critical part of their decision making when assigning a page to a specific topic.

But how do you make a link?

`a` tag with `href`

Turns out it’s not as straightforward as one might think. The simplest way to put a link on your site is to use a good old <a> tag with a URL which it points to in the href attribute.

Copy

<a href="/elsewhere">A good link, YES ╰(*°▽°*)╯</a>

`a` tag with `href` and event handler

For those with special circumstances, they might sprinkle a little bit of JavaScript on top and use an event handler to navigate the user programmatically:

Copy

<a href="/elsewhere" onclick="goTo('elsewhere')">Okay ¯\_(ツ)_/¯</a>

This is fine as the link stays functional and you can upgrade the functionality using JavaScript.

`a` tag without `href`

But some people decide to remove the href attribute. This is not a good idea because you now prevented crawlers to find out where this link goes to:

Copy

<a onclick="goTo('elsewhere')">Please don't ╯︿╰</a>

`a` tag with `href` but no link

In other occasions, people use the href attribute without a URL or with a pseudo URL:

Copy

<a href="javascript:goTo('elsewhere')">Seriously? (⊙_⊙)？</a>

This is even worse than the previous case as it just confuses the hell out of every crawler out there.

using `button`

You might think it’s a good idea to use a button to navigate the user, but let me tell you, that’s not a good idea either. The rule of thumb is that if the purpose is to do something on the current page, it could be a button. But if it’s takes users to another page or to an external site, it should be a link.

Copy

<button onclick="goTo('elsewhere')">But why? <( _ _ )> </button>

any other HTML element

It’s worth noting that you shouldn’t simulate a link using any other HTML element and add a click handler with JavaScript:

Copy

<div onclick="goTo('elsewhere')">NOOOOOOOOOOOOOOOO!!!!!!!!!!!! (#`O′)</div>

This not only wrong for crawlers, but also messes up the screen readers and causes a lot of trouble for people with any vision impairment. So please just use a link with a proper URL.

What is a proper URL? I hear you ask

You saw we ruled out the pseudo URLs like javascript:doSomething(), but let’s take a look at URLs more closely.

Copy

http://example.com/old-school-url

example.com/page#section

A URL contains these elements:

A protocol (optional), which defines the protocol to be used for navigation such as http, or https.
It also has a host, example.com or yashints.dev. A host is a name that one or some computers respond to. Usually it points to an IP address.
It has a path to specific asset on that computer such as an HTML file, an image, CSS file or a font. But that’s not always the case, sometimes the path is handled via JavaScript and is used to replace part of the content in a page. This technique is called Single Page Application or SPA.
Some URLs might contain another part such the second example above. That part which comes after the # sign, is called a fragment identifier. By itself a fragment identifier is not a piece of content. It just points to a specific part in the content such as a header.

💡 Because fragments are not suppose to point to different content, crawlers ignore them altogether. This means for single page applications where they use fragment like routing, crawlers don’t follow them and that’s why people use techniques such as server side rendering or SSR to allow crawlers become aware of the page’s content.

Summary

To sum it all up:

Use proper link markup, a tag with href attribute.
Do not use other HTML elements to navigate users.
Do not omit the href attribute on an anchor tag.
And last but not least, do not use fragment identifiers to load different content in SPAs if you can.

Hope you’ve enjoyed reading this and thanks for drooping by. Until next article, Ta.

Microsoft Build 2020 highlights 🔣

Sat, 23 May 2020 00:00:00 GMT

Microsoft Build went on fully online and it came with some really exciting announcements. For us developers some of these can bring massive efficiencies. So let’s see what’s on offer.

WSL2

Windows Subsystem for Linux v2 (aka WSL2) is here with a ton of awesome features allowing developers to have a really great experience working in a side by side Windows/Linux environment.

No Hyper-V image is needed to run docker containers
GPU Support
100% system call compatibility
Increased I/O performance

Linux GUI apps in Windows

This was really an exciting announcements. Microsoft is adding a full Linux Kernel to its Windows Subsystem for Linux v2 (aka WSL2) with GUI support and GPU acceleration.

This will be enabled without us having to use X11 forwarding and it’s mainly designed for developers to run Linux integrated development environments alongside regular Windows apps.

Image from Microsoft’s official blog

Winget, Microsoft’s package manager

This is probably one of those controversial topics where people will say: oh another package manager. But Microsoft believes they have considered all options and this decision was made with lots of considerations.

You can install winget via it’s App Installer package. You can also join their insider program which contains the winget by default.

You can easily add your package to this package manager by following their instructions on their GitHub repository and create a PR containing your package’s information and link to download.

Just so you know how excited people are, there are already 228 open PR’s and 541 closed. Of course not all of those PR’s have been packages, but even so, it’s a lot of packages submitted already.

Microsoft’s new PowerToys Run launcher

Microsoft just released a new Spotlight-like launcher app for Windows 10. This launcher is part of a series of apps which come with the PowerToys tool set.

It’s still preview, but you can install it today. Jump into this page and download the msi file, then install it.

Or if you like to do it a bit more fancy, just run this in your terminal:

Copy

WinGet install powertoys

Remember this requires winget to be installed to work.

Once installed, press Alt + Space and you’ll get this beautiful launcher:

💡 You need to run it manually for the first time for now. This will get fixed once they release their GA version.

Alongside PowerToys Run, Microsoft also released a Keyboard Manager PowerToy which allows you to define shortcuts for your favourite actions, or remap keys like replacing A with B. Check out the other cool tools in their GitHub page.

Project Reunion

Microsoft announced Project Reunion, an effort to bring win32 desktop apps and its Universal Windows Platform (UWP) apps close together. From their page:

Project Reunion makes it easier to build a great Windows app by providing a unified platform for new and existing Win32 and UWP apps. It will unify access to existing Win32 and UWP APIs and make them available decoupled from the OS, via tools like NuGet.

Fluid framework

Microsoft is adding a new type of document to it’s Office suite called Fluid Framework. This allows multiple people to collaborate on a single document with fast speed and offers multiple types of elements like tables, graphs and lists in one place rather than having to use multiple apps for different reasons.

Apart from aforementioned features, it comes with ability to @mention someone to notify them of something, plus activity feeds for each document if you want to be notified of the changes.

And to emphasise their focus in bringing more to open source, they are making this framework open too.

Project Bonsai

Project Bonsai is Microsoft’s effort in creating a platform which lets developers and engineers create autonomous systems. It is a machine teaching service to create and optimize intelligence for industrial control systems. Through machine teaching, subject matter experts without an AI background can break down their expertise into steps and tasks that are imparted to AI agents.

Static Web Apps

Static Web Apps offers static Web applications powered by storage for hosting and Azure Functions as backend APIs. They also have the full pipeline on GitHub using GitHub actions to let you deploy your apps really fast.

These are some of the key features:

Free web hosting for static content like HTML, CSS, JavaScript, and images.
Integrated API support provided by Azure Functions.
First-party GitHub integration where repository changes trigger builds and deployments.
Globally distributed static content, putting content closer to your users.
Free SSL certificates, which are automatically renewed.
Custom domains to provide branded customizations to your app.
Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration.
Authentication provider integrations with Azure Active Directory, Facebook, Google, GitHub, and Twitter.
Customizable authorization role definition and assignments.
Back-end routing rules enabling full control over the content and routes you serve.
Generated staging versions powered by pull requests enabling preview versions of your site before publishing.

Image from Microsoft blog

Others

There were dozens of other stuff announced, but here are some of the developer related ones:

Blazer WASM is released
MAUI makes mobile app development easier
Visual Studio is becoming Visual Studio Codespaces
GitHub Codespaces brings amazing developer experience right from your browser
GitHub Discussions for brainstorming feature ideas, help new users
Code scanning and secret scanning on GitHub on private repositories
GitHub Private Instances – a fully managed environment for enterprises
GitHub Actions for Azure are now integrated within: Visual Studio Code, Azure CLI, and the Azure Portal. This makes it easier to deploy from GitHub to Azure!

Hope this has given you some pointers to go play with some of these amazing features and till next time 👋🏽.

Swapping variables in JavaScript 🔁

Fri, 15 May 2020 00:00:00 GMT

There may be many different reasons why you’d want to swap two variables be it just changing two item’s location in an array or when sorting collections. The traditional way is just define a new variable, assign one value to it, put one of the items in the old place, then put the temp variable back in the new place. But my question is, is that the only way?

Traditionally

The old way of swapping two variables is done like below:

Copy

let x = "Yas";
let y = "Hints";

let temp = x;
x = y;
y = temp;

console.log(x); // Hints
console.log(y); // Yas

There is nothing wrong with this approach unless you’re doing it frequently.

Without the temp variable

There is another way you could swap two variables without any temp variable. But this only works with numbers:

Copy

let x = 10;
let y = 20;

x = x + y;
y = x - y
x = x - y;

console.log(x); // 20
console.log(y); // 10

This works two, but now we’re doing three additional operations to save some space, so you need to be careful when you use this one. Another thing to consider with this approach is the chance of having overflows with additions or subtractions (sum should be less than Number.MAX_SAFE_INTEGER which is 9007199254740991).

Bitwise `XOR`

Similar to above approach, you could use XOR to swap the two variables, but this also works only on numbers:

Copy

let x = 3;
let y = 5;

x = x ^ y;
y = x ^ y;
x = x ^ y;

console.log(x); // 5
console.log(y); // 3

If you’re not familiar with XOR, it works on bits. When you perform XOR two bits, it evaluates to 1 if they are different, and evaluates to 0 if they’re the same.

x	y	XOR
0	0	0
1	1	0
0	1	1
1	0	1

So let’s see why this works.

x = x ^ y
y = y ^ x when x = (x ^ y), so the y = (x ^ y) ^ y which equals to x ^ (y ^ y) = x ^ 0 = x. So now our y is the old x.
x = x ^ y when according to our first step x is not x ^ y, and so x = (x ^ y) ^ x = y ^ (x ^ x) = y ^ 0 = y.

Is this better than the previous one, probably faster, but still limited to numbers only.

ES6 destructuring

Destructuring is an ES6 feature which is used a lot in many of the modern frameworks. In its core, it allows you to store array elements in variables.

Copy

let x;
let y;

[x, y] = [1, 2, 3];

console.log(x); // 1
console.log(y); // 2

Now considering how we can use this to swap the elements of an array:

Copy

let x = "Yas";
let y = "Hints";

[x, y] = [y , x];

console.log(x); // Hints
console.log(y); // Yas

This method is much elegant, but still creates two arrays to perform the swapping. So the efficiency might not be that good if you’re swapping many elements.

Summary

Just because a feature is available, doesn’t mean you should use it in every situation. Think about what is the most important factor in the solution you’re implementing. If it’s space, choose one which doesn’t take much, although it’s a bit slower.

If the memory doesn’t matter but speed is important, choose accordingly. But definitely consider the situation before deciding on your approach.

All you need to know about string in JavaScript 🧵

Mon, 11 May 2020 00:00:00 GMT

String is one of the primitive types in JavaScript and we use it in every project we work on no matter what. But how familiar are you with the methods available in JavaScript to work with a string variable? Let’s have a quick look at those in this article.

Introduction

A primitive value such as “Yas” doesn’t have any methods or properties, mainly because it’s not an object. But with JavaScript, methods and properties are available because it treats primitive values as objects.

Let’s have a look at the simplest method you have most definitely used:

String length

The length property returns the length of a string:

Copy

const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log(alphabet.length); // 26

Pay attention on how length property is available on a primitive type. Not all languages are following the same principle when dealing with such behaviour though. In PHP we have helper functions:

Copy

<?php
echo strlen("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
?>

Finding a text in string

There are a few methods to help you find a sub-string in a String. Let’s go through them and see what are their differences:

`indexOf`

The indexOf method returns the index of the first occurrence of a specified text in a string:

Copy

const txt = "Can you find Yas in 'dryasdust'?";
console.log(txt.indexOf('yas')); // 23

There a few points you need to know here. First, JavaScript counts positions from zero, and second, indexOf is case sensitive.

Copy

const txt = "Can you find Yas in 'dryasdust'?";
console.log(txt.indexOf('Yas')); // 13

This method returns -1 if it can’t find the text:

Copy

const txt = "There is no 0 in 11";
console.log(txt.indexOf('zero')); // -1

You can pass a second argument to let the indexOf know where to start looking for the text:

Copy

const txt = "We have SQL and no-SQL databases!";
console.log(txt.indexOf('SQl', 10)); // 19

`lastIndexOf`

As the name suggests, lastIndexOf is used to find the last occurrence of a text in a string.

Copy

const txt = "Can you find Jam in 'JamStack'?";
console.log(txt.indexOf('Jam')); // 21

This method also returns -1 if it can’t find the text you’re looking for, and takes a second parameter to start the search. However, since this method starts the search backward, the second parameter acts as cutting the string from that position to the end:

Copy

const txt = "Can you find Jam in 'JamStack'?";
console.log(txt.lastIndexOf('Jam', 6)); // -1

`search`

The search method also searches the string for a text and returns the first occurrence of the text:

Copy

const txt = "Can you find Jam in 'JamStack'?";
console.log(txt.search('Jam')); // 13

You might think that search and indexOf are the same. However, there are differences in these two:

search doesn’t accept any other parameter
indexOf cannot take powerful search values such as regular expressions

That’s right, search will accept regex as argument as well, for example, to perform a case insensitive search you might want to use search instead of indexOf:

Copy

const txt = "There is Jam in JamStack!";
console.log(str.search(/jam/i)); // 9

console.log(txt.indexOf('jam')); // -1

You can also search for non usual patterns, e.g. finding any character that is not a word or whitespace:

Copy

const txt = "There is Jam in JamStack!";
console.log(txt.search(/[^\w\s]/g)); // 24

`endsWith`

The endsWith methods checks whether the string ends with the specified text. It returns true if it does, and false if it doesn’t:

Copy

const txt = "There is Jam in JamStack!";
console.log(txt.endsWith("Stack!")); // true

💡 This method is case sensitive.

`startsWith`

Similar to endsWith, this method checks whether a string starts with the specified text. This method is also case sensitive:

Copy

const txt = "JamStack's got Jam";
console.log(txt.startsWith("JamStack")); // true

`includes`

includes allows you to check whether or not a string contains a specified text and is case sensitive:

Copy

const txt = "There is Jam in JamStack!";
console.log(txt.includes("in")); // true
console.log(txt.includes("Jam")); // true
console.log(txt.includes("jam")); // false

`localeCompare`

localeCompare will compare two strings in the current locale. It returns a negative number indicating if the reference string occurs before the compare string, positive if it occurs after, and 0 if they are equivalent:

Copy

const a = 'réservé'; 
const b = 'RESERVE';
console.log(a.localeCompare(b)); // 1
console.log(a.localeCompare(b, 'en', { sensitivity: 'base' })); // 0

Extracting sub-strings

There are three methods which allow you to extract part of a string.

`slice`

slice extracts part of a string and returns the extracted part in a new string. It takes two arguments, start position, and end position (the end position will not be included).

Copy

const txt = "There is Jam in JamStack!";
console.log(txt.slice(9, 12)); // Jam

If you pass a negative value, it will start from the end of the string:

Copy

const txt = "There is Jam in JamStack!";
console.log(txt.slice(-16, -13)); // Jam

You can omit the second parameter, and it will extract from start to the end of the string:

Copy

const txt = "There is Jam in JamStack!";
console.log(txt.slice(16)); // JamStack!

`substring`

The substring method is similar to slice but it won’t accept negative indexes:

Copy

const txt = "There is Jam in JamStack!";
console.log(txt.substring(16)); // JamStack!
console.log(txt.substring(9, 12)); // Jam

`substr`

substr method is similar to slice with one difference that the second parameter is the length of the text to be extracted and not the position:

Copy

const txt = "There is Jam in JamStack!";
console.log(txt.substr(9, 3)); // Jam

And if you omit the second parameter, it will extract to the end of the string. Furthermore, if the index you pass is negative, it will count from the end:

Copy

const txt = "There is Jam in JamStack!";
console.log(txt.substr(-9)); // JamStack!

`split`

Although this method is not directly used for extracting a text value, it’s good for splitting the string value by a character and return an array of substrings:

Copy

const txt = "There is Jam in JamStack!";
const words = txt.split(' ');
console.log(words[4]); // JamStack!

A few points regarding this method:

The simplest case is a single character, also referred to as delimiter. For example you can split a tab separated value (TSV) by using str.split("\t").
If the separator contains multiple characters, that entire string needs to be found.
If the separator cannot be found, the return value is an array with one element containing the whole string.
If the separator appears at the beginning or end of the array, it still counts. Meaning the return value is an array with a string value, and one empty string item either at the start or at the end of the array.
If you pass an empty string " as the separator, it splits the string into single UTF-16 characters.

Copy

const txt = "There is Jam in JamStack!";
console.log(txt.split('Jam')); // ["There is ", " in ", "Stack!"]
console.log(txt.split('test')); // ["There is Jam in JamStack!"]
console.log(txt.split('There')); // ["", " is Jam in JamStack!"]
console.log(txt.split('')); // ["T", "h", "e", "r", "e", " ", "i", "s", " ", "J", "a", "m", " ", "i", "n", " ", "J", "a", "m", "S", "t", "a", "c", "k", "!"]

Replacing string content

The replace method, as the name suggests, replaces a part of the string with the provided text:

Copy

const txt = "Who's awesome!";
console.log(txt.replace("Who's", "You're")); // You're awesome!

💡 This method doesn’t change the original string, it returns a new one.

By default, it’s case sensitive and just replaces the first match:

Copy

const txt = "This 🐶 is a good 🐶!";
console.log(txt.replace("This", "That")); // This 🐶 is a good 🐶!
console.log(txt.replace("🐶", "🐕‍🦺")); // This 🐕‍🦺 is a good 🐶!

To do a case insensitive replace or to replace all matches, you could use regex:

Copy

const txt = "This 🐶 is a good 🐶!";
console.log(txt.replace(/THIS/i, "That")); // That 🐶 is a good 🐶!
console.log(txt.replace(/🐶/g, "🐩")); // This 🐩 is a good 🐩!

Case conversion

To convert a string to uppercase or lowercase you can use toUpperCase and toLowerCase respectively:

Copy

const txt = "What's up bro!";
console.log(txt.toLowerCase()); // what's up bro!
console.log(txt.toUpperCase()); // WHAT'S UP BRO!

We also have toLocaleLowerCase and toLocaleUpperCase methods to convert according to user’s current locale:

Copy

const dotted = 'İstanbul';
console.log(`EN-US: ${dotted.toLocaleLowerCase('en-US')}`); // "i̇stanbul"
console.log(`TR: ${dotted.toLocaleLowerCase('tr')}`); // "İSTANBUL"

Concatenation

You can use concat to join two strings together (like + operator):

Copy

let message = "Hello" + " " + "World!";
console.log(message); // Hello World!
message = "Hello".concat(" ", "World!");
console.log(message); // Hello World!

Trimming and padding

`trim`

To remove whitespace from both sides of a string value, you can use the trim function:

Copy

let message = "     Hello World!     ";
console.log(message.trim()); // "Hello World!"

💡 Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.).

`padStart`

The padStart method adds a given string at the start of the original string (multiple times, if needed), until the resulting string reaches the given length.

Copy

const str1 = '5';
console.log(str1.padStart(6, '0')); // 000005

`padEnd`

The opposite of padStart is the padEnd.

Copy

const txt = 'OMG Jam';
console.log(txt.padEnd(25, '.')); // OMG Jam..................
console.log('OMG Jam'.padEnd(10)); // "OMG Jam   "

Getting the string value

There are two methods where you can get the value of a string in JavaScript. You might say, Yas are you crazy, we already have the value in the variable. But remember that I said JavaScript treats a string variable as an object under the hood, so these methods come from the Object.prototype.

`valueOf`

The valueOf returns the primitive value of an object. For string values, JavaScript does it for you under the hood whenever you invoke a method which needs the primitive value. But you can also call this method to get it:

Copy

const txt = "Yas";
console.log(txt.valueOf()); // "Yas"

`toString`

Similar to the above method, toString is used to return the value of a string.

Copy

const stringObj = new String('Yas');
console.log(stringObj); // String {"Yas"}

console.log(stringObj.toString()); // "Yas"

`repeat`

This method is my personal favourite. You can pass a number to the repeat method and it returns your string repeated by that number. It’s really good if you want to have some long text generated for testing purposes:

Copy

const txt = "Lorem ipsum faked,";
console.log(txt.repeat(5)); // Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,

Character methods

`charAt`

The charAt returns a new string consisting of the single UTF-16 code unit which is located at the index specified:

Copy

const txt = "There is Jam in JamStack!";
const index = 4;
console.log(`The character at index ${index} is ${txt.charAt(index)}`); // "The character at index 4 is r"

`charCodeAt`

The charCodeAt returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index:

Copy

const txt = "There is Jam in JamStack!";
const index = 4;
console.log(`The character code at index ${index} is ${txt.charCodeAt(index)}`); //The character code at index 4 is 101

`codePointAt`

The codePointAt method returns a non negative integer representing the Unicode point value of the specified index:

Copy

const icons = '☃★♲';
console.log(icons.codePointAt(1)); // "9733" 
'\uD800\uDC00'.codePointAt(0)  // 65536

`normalize`

And last, but not least, the normalize method returns the Unicode normalisation form of a string:

Copy

const myAlias = '\u0059\u0061\u0073\u0068\u0069\u006e\u0074\u0073';
console.log(`${myAlias}`); // Yashints

Summary

Hope you enjoyed reading this and learnt a few tricks which could help you at what you do day to day. And let’s finish this article with a joke:

What do you call it when Wilhelm II makes a string of bad puns? 👉🏽 A Kaiser roll

Untitled RSS Feed

From ARM to Bicep 💪🏽

What’s not working with ARM templates?

What is Bicep?

Benefits

Syntax

Parameters

Variables

Expressions

functions

Ternary operator

Output

Loops

Existing keyword

Modules

The any keyword

Tooling

VS Code extension

CI/CD

CLI

Summery

Exploring Azure Function Triggers and Bindings ⚡

Working with Azure Functions locally

Triggers

Timer trigger

Blob trigger

Cosmos DB trigger

Bindings

IBinder

Other bindings

Summary

How to end-to-end test your Vue.js apps with Playwright 🧪

Concepts

Stage is set

Options

The code

Main setup

Login component

Router config

Setting up the tests

Writing tests

More complicated tests

Full code

Summary

How much do you know about Azure CosmosDB Emulator? 🧐

Intro

Features

API set

Number of containers

Operating System

Installation

Differences

Summary

Add dual screen support to your applications 💻

Problem

Solution

Detecting display regions

Environment variables

Window Segments Enumeration API

Where to start?

How to use Azure Cosmos Emulator as a local MongoDb database 🌍

Install if you haven’t already

Starting the emulator

Getting the connection string

Creating a Node.js Web API project

The app

Seed the database

Creating the endpoint

Testing the application

Summary

Access your clipboard on your other devices 😍 📋

Windows to Windows

Use the copied text

Additional tip

Mac to Mac

Windows/Mac/Linux to Mac/Windows/Linux

Warning

Summary

I've joined Microsoft as an Azure Technical Trainer 🗺️ 😍

Background

The `any` keyword