DEV Community: Maxim Salnikov

Leveraging GitHub Copilot Chat syntax: chat participants, chat variables, slash commands

Maxim Salnikov — Sun, 23 Jun 2024 14:44:42 +0000

GitHub Copilot Chat is an incredibly powerful and useful feature that allows you to chat with or about your code. Even though it’s 100% natural language-friendly (i.e., you can send your messages without using any specific syntax), leveraging some special chat capabilities can unlock new AI-assisted development scenarios and significantly boost your productivity.

These powerful features, which you can use by applying special syntax, include chat participants, slash commands, and context variables. Note that the described features are available in VS Code and might not be fully supported in other IDEs where GitHub Copilot Chat is available.

Target your question or request by messaging one of the available chat participants

In GitHub Copilot Chat, you can reference one of the AI-powered “domain experts” using conventional chat syntax—by prepending @ to the participant name. The currently available chat participants are:

@workspace: Knows everything about the code in your currently open workspace. This is the chat participant you will most likely communicate with frequently.
@terminal: Knows all about the integrated terminal shell, its contents, and its buffer.
@vscode: Knows about the VS Code editor, its commands, and features.

Example: Let’s get information about the backend part of the project we’ve just been assigned to by asking the @workspace chat participant right after we open the project folder in VS Code.

In this particular case, you don’t even need to have files open in your editor. Compare this with the response you get without tagging @workspace:

The @workspace chat participant is instrumental for all solution-wide queries where you want all code to be considered for the chat response. However, this doesn't mean that all code will be used and sent as part of the prompt. The GitHub Copilot Chat extension in VS Code does its best to determine relevant files and parts of these files using local knowledge and intelligence first. You can check which files and code lines were used for the prompt by expanding the “Used references” line:

Productivity hint: Use Ctrl-Enter (Cmd-Enter) instead of just Enter after typing your message, and the @workspace string will be inserted into your message automatically before sending.

Be precise in setting the context using chat variables

In many cases, considering the full solution as the context for your question or request (by using @workspace) is overkill. You might want to point to specific files or even parts of the files in your message. Chat variables can help! Use # to call one from this list:

#file: Points to a specific file in your workspace.
#codebase: All content of the open workspace. It’s similar to using @workspace and might be useful when you chat with another agent (like @terminal) but still want to reference the full solution.
#editor: Source code in the editor’s viewport (visible part).
#git: Current git repository: branch, remotes, path, etc.
#selection: The currently selected code.
#terminalLastCommand: Last run command in the editor’s terminal.
#terminalSelection: Selection in the editor's terminal.

Example: Let’s get help on improving method names in a specific file (and we want to ensure that the whole content of the file is taken into consideration).

Productivity hint: Use the up and down keyboard arrows to pick the chat variable you need after typing #. In the case of #file, use keyboard navigation again to pick one of the suggested files.

Call the most often used actions quickly with slash commands

Chatting with your code using natural language is fun, but having the option to call often-used actions using handy shortcuts is even better. Compare typing the full message “Explain how selected code works” versus typing “/”, then using keyboard arrows to pick /explain from the popup overlay. Another benefit of using the predefined syntax for commands is the confidence that GitHub Copilot understands our intent 100% correctly (natural language might have some ambiguity). There are a bunch of slash commands available. You can use them in conjunction with referencing the chat participant to provide the desired scope. Some of the commands are:

/help: Help about available slash commands, chat participants, chat variables, and more.
/doc: Generate documentation for the code.
/explain: Explain how the code works (or get help with terminal commands if you prepend @terminal).
/fix: Optimize and/or fix issues in the code.
/tests: Create unit tests for the code.
/new: Scaffold a new workspace.

Example: Let’s get an explanation for one of the regular expressions in our code. Select the code line and use the slash command “
/explain.

Productivity hint: Try GitHub Copilot Chat in inline mode instead of having the chat always open in the side pane. Press Ctrl-I (Cmd-I) and type your message in the small overlay dialog that appears right above the line where your cursor is in the code window.

Summary

Use chat participants, chat variables, and slash commands to maintain full control over the conversation context, ensure correct and consistent understanding of your intentions, and ultimately chat and code faster!
Start your free GitHub Copilot trial here: https://aka.ms/try-github-copilot

References

Building oEmbeddr using Azure Static Web Apps with Svelte, Bootstrap 5, and TikTok!

Maxim Salnikov — Tue, 03 Nov 2020 21:57:01 +0000

Let's build a simple web application that uses posts embedding code generation API exposed by the social networks.

TL;DR: In this chapter, you will learn about:

Scaffolding a Svelte 3 app which performs a fetch request
Adding Bootstrap 5 UI with using modern frontend techniques
oEmbed format
The very first step to build, deploy, and host your webapp on Azure Static Web Apps service
The app will look like this: oEmbeddr v1

To find the app idea, I explored a couple of quite extensive unofficial TikTok API projects but decided to keep things simple and go for the only web-focused official one dedicated to embedding videos using oEmbed format. I've never heard about oEmbed before but it seems like it's an industry-standard in sharing the content from social networks: there are 248 providers available so far including all the major players.

This format and corresponding API is too simple - a single GET endpoint. So I decided to add some extra complications to challenge myself a bit: for the frontend I will use the Svelte framework I've never tried before, and for the UI, I will use Bootstrap. Well, it's hard to find a frontender who built websites in the early 10s (pre-frameworks golden era) and never used Bootstrap. I personally actively used versions 2 and 3 of it before switching to framework-connected UI tools. But after a long break, I decided to check what's going on with this legendary UI library and discovered a Bootstrap 5 Alpha 1 version announced in mid-June 2020. As blog post states, it's the first version without dependency on jQuery, including enhanced grid system, extensive usage of CSS variables, rearchitected form controls, and tons of other new features. It's hard to find a better opportunity to explore it and share my findings.

Also, TikTok video embedding API will be just a starting point for us - the app I called oEmbeddr will eventually support all the providers mentioned in the oEmbed repo. But let's keep this for the next articles. What do I want to achieve today:

A SPA with only one section (so far) where we have the input for the social network post URL to share
Sending a request to the corresponding API endpoint
Displaying an HTML code we received, having "Copy to clipboard" feature, and a preview
Responsive, accessible, satisfactory looking UI
Zero configuration CI/CD workflow
Globally distributed hosting

Let's go!

What is oEmbed and how to use it in TikTok

Many if not all social networks have the functionality to get an HTML code to embed a particular post in some external resource like a blogpost. And all of them build this feature using oEmbed format co-created by Cal Henderson, current Slack CTO, and co-founder.

From the UX perspective, some of the networks (like TikTok) have the corresponding button explicitly visible and getting the code is just a click away, other (like Facebook) redirect you to the developer portal and you have to learn about SDK, configuration, etc. before getting the code, thirds (like Twitter) just hide this feature from UI but support it.

You can read the full oEmbed format specification here but for our project, we'll use the simplest scenario: we call an API endpoint (GET method) where we pass a required parameter url. In return, we receive a JSON with the HTML code in the html field to embed. A page called Embed videos of the TikTok Developer portal informs us about supporting exactly this option.

And... we are lucky with selecting TikTok as a very first provider for our demo: it's the only service from the social networks I tried which has the Cross-origin resource sharing (CORS) configured the way we can call this API endpoint straight from the browser. So we can keep building backend of oEmbeddr for the next articles.

Scaffolding a Svelte app

Why did I ever decide to use Svelte? First, I wanted to try it for a long time. And second, I'm not a big fan of the direct DOM manipulation. So I'm fine with having some code overhead and getting a nice developer experience in return.

If you use the VS Code I strongly recommend installing Svelte extension. It provides syntax highlighting and rich intellisense for Svelte components in VS Code.

After reading the "Getting started" page I created a "hello world" template using degit - a utility for the straightforward project scaffolding, also by Rich Harris, creator of Svelte.

npx degit sveltejs/template oembeddr
cd oembeddr
npm install
npm run dev

Just a few moments and a ready-to-go dev environment created. Opening http://localhost:5000/ in the browser works fine. Running npm run build generates a production code to be deployed in the public folder (let's remember this name for later).

After quick learning on how to bind data from the input value (to pass the URL user provides to my fetch method) and handling DOM events (form submission in my case), I was ready to fetch the data from TikTok API.

So, we have to send an HTTP request and update UI based on the response. This is where Svelte's reactivity and DX shine! I just followed this async/await example from the tutorial to have a resulting code and markup in the core (and only for now) app component in the file App.svelte like this:

And it works! Hereafter, I will use my first ever TikTok video as an example. Please feel free to watch the magic transition of my cat to Octocat, and follow me :)

I send a request, get results, display it in UI. All reactively, declaratively, without manual DOM manipulation. Svelte just works and the bundle.js size after I run npm run build is 6K. I find it acceptable.

But we can't deploy a page with such a minimalistic design and poor UX. Let's use a UI library!

Adding Bootstrap 5

Let's live on the edge and install a very first (and only to the moment) Alpha of this version: npm install bootstrap@5.0.0-alpha1

Disclaimer. I'm aware of the awesome Sveltestrap library with some really "Svelte-native" components based on Bootstrap. It might be a better technical decision for real-life projects. But my strong intention was to try Bootstrap 5 (Sveltestrap uses v4) in a "modern frontend" mode: with compiling Sass for theming, with importing only JS components we use, with outsourcing the build to Svelte dev environment. Also, I understand that by direct usage of Bootstrap JS components I partially lost the app code's reactivity and declarativity.

Styles

The package contains both built/complied assets and source code. I want to have full control over resulting CSS both in terms of components I include and theme I use, so let's find a way to compile Sass during the Svelte app build.

Bootstrap uses PostCSS and Autoprefixer for Sass compilation and we can have these tools injected into the overall build flow by the magic of svelte-preprocess package that "acts as a facilitator to use other languages with Svelte, providing multiple features, sensible defaults, and less noisy development experience". To get this configured I follow this thread:
1) Installing the packages:

npm install -D svelte-preprocess node-sass autoprefixer

2) Adding to the Rollup configuration file rollup.config.js following lines:

import autoPreprocess from 'svelte-preprocess';

const preprocessOptions = {
    scss: {
      includePaths: [
        'node_modules',
        'src'
      ]
    },
    postcss: {
      plugins: [
        require('autoprefixer'),
      ]
    }
  }

export default {
    ...
    plugins: [
        svelte({
            ...
            },
            preprocess: autoPreprocess(preprocessOptions)
        }),
        ...
    ],
    ...
};

It gives us possibility to use Sass syntax in the source code:

<style type="text/scss">
  $body-bg: #eeeeee;
  @import "bootstrap/scss/bootstrap";
  // and other Sass awesome features
</style>

I also recommend to set up Svelte for VS Code extension to have better Sass support in IDE.

It's good to know that specifying node_modules in includePaths gives us the possibility to skip adding ../node_modules/ part of the import path which makes our source code look way cleaner.

Then, I create src/styles.scss file and follow the customization guide of Bootstrap. I import only the core configuration files and the files with the styles of components I will use: Nav, Navbar, Toast, Alert, etc. On top of the same file, I will override some color variables to give my app a unique style. The result (shortened a bit):

I reference this file in App.svelte:

<style type="text/scss">
  @import 'styles';
</style>

Now, after the build, I see some Bootstrap classes in bundle.css - a good sign! But the file size is too good to be true - 2 to 7K (depending on the amount of HTML markup you have so far). Bootstrap CSS with the number of components we specified can't be so lean. When we try to apply some Bootstrap classes to HTML markup the CSS bundle file size grows but the result looks somehow broken. What's wrong? Nothing. In addition to styles scoping, Svelte's compiler is removing unused (in this particular component) classes from the resulting CSS. But in case of the UI library (like Bootstrap or others), we have some classes applied to outer parts of this particular component even if it's the root one (for example, for <body> tag) and we want all classes to be available for all other components without scoping. I.e. we take a technical decision to plug in the whole UI library CSS file to Svelte's root component (App.svelte in our example) "as is".

And there is a solution for that! We can make the styles in the <style> block fully or partially untouched by Svelte's scoping and optimizing engines by using a global modifier like explained here. So I added it to the code:

<style global type="text/scss">
  @import 'styles';
</style>

and everything related to Bootstrap styling started to work as intended.

The obvious downsides of this:

Svelte can't optimize CSS by removing unused styles. We take care of it ourselves by importing only the parts of the UI library we need.
Svelte can't prevent styles "leakage" from this component to all others. But in for the UI library, this behavior is exactly what we want.

All clear with the styles now, we are ready to use Bootstrap classes in our markup!

Adding some layout helpers, classes, extra attributes to the form...

...and the look & feel is completely different:

JavaScript plugins

Let's stop with the styles for now and have a look at Bootstrap's JavaScript plugins. For oEmbeddr, I decided to use:

Tabbed content component (In the Bootstrap, it's called "Nav" in the component library, plus "Tab" in JavaScript plugins) to separate UI of the embed code (we'll place this code into an textarea) and preview (we'll load this code into an iframe using srcdoc attribute)
Floating message box ("Toast" in the Bootstrap) to show the success message after clicking the "Copy code to clipboard" button.

Setting up Nav/Tab is straightforward: just use the provided HTML code sample from the documentation with correct data attributes binding the "tab" and content it shows. For our scenario, there is no need in any JavaScript code except the module import:

import Tab from 'bootstrap/js/src/tab';

In the modern browsers, we can use this import without any extra processing in <script type="module"> tag but let's ask Svelte to do bundling for us, just put this import into <script> section of App.svelte.

The component works fine:

Let's cook a toast now. First, import:

import Toast from 'bootstrap/js/src/toast';

Then, adding HTML (I simplified this sample):

<div class="toast" role="alert" id="copySuccessToast" data-delay="2000">
      <div class="toast-header">
        <strong>oEmbeddr</strong>
      </div>
      <div class="toast-body">The code was copied to the clipboard</div>
</div>

Finally, we initialize and show (here is the API docs) this message box (after successful copying code from textarea to the clipboard):

let copySuccessToast = new Toast(document.getElementById("copySuccessToast"));
copySuccessToast.show();

Let's give it a try:
1) Open https://kind-sea-08852d11e.azurestaticapps.net/
2) Paste https://www.tiktok.com/@webmaxru/video/6858249402683886854 into the input, click "Get code"
3) Click "Copy to clipboard" and you will see this toast:

That was a journey! But now we know how to plug in Bootstrap 5 in its the most natural and flexible form to Svelte application.

Time to push our project to GitHub - here is my repo with the full source code, please, feel free to clone it - and proceed to the next step.

Hosting

Let's present our application to the whole world! With the global distribution and dynamic scale provided by Azure Static Web Apps service, we are fully covered!

This will be the shortest section of our story because setting up a frontend application on Azure Static Web Apps takes only a few clicks and less than 5 minutes.

Log in to Azure cloud portal (if you don't have an account please register a free trial), search for Static Web Apps in the top search field, and click "Add".

On the first screen, you enter your app name, resource group (or create new), and region. Also, you will be asked to log in to your GitHub account and to select an organization/repo/branch where the app located:

On the next screen, you need to specify some details about your project. In our case, we only need to type public in the App artifact location field (do you remember I asked you to remember where Svelte outputs the build artifacts?)

After clicking on "Create" and a few seconds, you will get a test public URL of your application available (for my project - https://kind-sea-08852d11e.azurestaticapps.net/). But while Azure Static Web Apps fetches your source code from GitHub, builds & deploys it (all automatically) you might want to have a look at the workflow for GitHub Actions file (my one) which was just created and added to your repo.

We are not going into the details of the Workflow file format, I just want to mention that since now, every push/merge to your master branch will invoke the CI/CD flow and you will be able to see an updated version of your app in a few moments (on the same URL). You can track the build progress in the corresponding GitHub Actions section.

Summary and what's next

We covered the application scaffolding using Svelte, adding Bootstrap 5 library, and hosted this simple page on the Azure Static Web Apps service. In the next article we:

Check how the staging works in Azure Static Web Apps when we want to preview a next version of the application without touching the "production URL"
Add more social network providers. To do it we'll build a backend using API part of the Azure Static Web Apps solution. Serverless for the win!

Let's stay connected on Twitter @webmaxru. And I'll be happy to see your feedback in the comments.

Maxim Salnikov
Developer Engagement Lead in Microsoft Norway

You are an Azure Hero. What's next?

Maxim Salnikov — Fri, 09 Oct 2020 16:19:43 +0000

Disclaimer: if you are not a lucky owner of an Azure Hero badge yet, please, learn more about this program and how to join.

Congratulations! You are one of the Azure Heroes. That means you have a mobile app called Enjin Wallet, created by our partners, which contains one or multiple badges. What's next? You decide! You could just secretly keep this collection for your eyes only and grow it. Or you could explore some interesting opportunities for you to contribute back to the tech community using your Azure Heroes status.

1. Share your award with the developer community

Every badge you have in your Enjin Wallet has a convenient way to publish it on social media. Just use the well-known "Share" icon on the badge details screen or use the "Share" menu item (click the three dots menu to get to it). You will get a quick post template for sharing on Twitter, LinkedIn, and others. Or you can just copy-paste the link to the badge from this template and write your own text. As a result, you will receive a nicely formatted social media post.

You are welcome to share every new badge you receive this way!

Also, on LinkedIn, there is a cool way to have the badges in your profile like this:

Just go to Edit profile -> Featured -> Add link

2. Reserve your spot on the Azure Heroes Community map

By default, your badge is completely anonymous and it's up to you to publicize it to the global developer community. And we have a solution for this!

Just go to the Azure Heroes Community website and associate your Twitter or LinkedIn profile with your badges (these is a simple and quick process for it). Once you've completed this, your name will appear on this website, linked to your country of residence.

Of course, you can remove this connection, and thus remove your profile from the Azure Community website, at any time.

3. Ask your employer if your company participates in the "Azure Heroes for Enterprise" program

For company-internal skilling and educational events related to Azure, we have a special offering called "Azure Heroes for Enterprise" with a special Azure Polymath badger. Do you want to delight your colleagues by providing them with Azure Heroes badges? Just ask the person who drives this internal motion to contact us at ahhelp@microsoft.com, and we'll come to your company's internal events to share the badges.

4. Collect more badges & badges of different types...

...and follow the updates on the Azure Heroes Twitter account or updates from your employer if your company is a part of "Azure Heroes for Enterprise". Soon we will start sharing some cool giveaways that you can get in exchange for some of your digital badges (exact rules are defined on a case-by-case basis). It's always great to have something "real" in addition to the digital badge, isn't it?

5. Received a badge as a student and your university has some courses about cloud technology?

We have a program called "Azure Heroes for University" where we distribute digital badges for the students attending these courses. Please, introduce your teacher to us by sending an email to ahhelp@microsoft.com, and we'll pick up the conversation.

Do you know more ways to benefit from Azure Heroes badges?

Please, share your ideas with us! We are eager to hear from you and reward the best suggestions :)

--
Yours, Azure Heroes team (Sherry, Maxim, Nick)

We celebrate Hacktoberfest by introducing OpenSourcer badge of Azure Heroes program

Maxim Salnikov — Thu, 01 Oct 2020 14:44:52 +0000

Today, at CONTRIBUTING.md, we announced the new addition to our #azureheroes family: The OpenSourcer badge!

👉 OpenSourcer badgers recognize those who help build a robust OSS environment, with impactful technology and a collaborative, engaged community. OpenSourcers build, maintain, and make meaningful contributions to open source projects, while inspiring others to be part of the OSS movement.

To qualify, you must:

Be a creator, maintainer or contributor to an impactful (in your own definition) open-source software project.
And react to contributors' questions and requests in Issues and Pull Requests, in a way that people with all levels of the technical experise feel welcomed in your code repository.
Optionally, introduce OSS by speaking, blogging and other public activities.

💻 Are you all about contributing to #OSS success? This is the right badge for you then! Nominate yourself or your colleague or friend!

Meet a new Green Contributor badge!

Maxim Salnikov — Wed, 30 Sep 2020 20:30:16 +0000

Today, at GreenConf 💚, we announced the new addition to our #azureheroes family: The Green Contributor 🌱

👉 Green developers contribute to the growth of the sustainable software engineering field. Recipients of this badge drive innovation by building sustainable software and help educate the community by creating content and resources related to sustainable software engineering.

To qualify, you must verify at least one of the impacts in any of the bullets below.

Creator or maintainer or core contributor to an open-source software project with a focus on sustainable software.
Created several pieces of content for blogs, webinars, podcasts, or talks related to sustainable software.
Created tutorials, how-to guides, or sample code related to the field of sustainable software engineering.

💻 Are you all about #sustainable software engineering? This is the right badge for you then! Nominate yourself or your colleague or friend!

My developer journey, and today's aspirations. Interview for Kode24.

Maxim Salnikov — Thu, 25 Jun 2020 07:51:09 +0000

I'm proud to be featured as a Week's Coder of the Norwegian online-magazine for the developers Kode24. Here is the English version of the interview I gave to Ole Petter Baugerød Stokke (Editor at Kode24) for the publication.

Quick facts

Name: Maxim Salnikov
Age: 40
Education: Master's degree in Software of computing technique and automated systems at Volga State University of Telecommunications and Informatics
Location: Oslo, Norway
Job title and employer: Developer Engagement Lead at Microsoft Norway
Experience as a professional developer: 20+ years
Your setup (what kind of machine, OS, editor, etc. you are using): Microsoft Surface Book 2 + VS Code + Visual Studio Codespaces
Favorite music right now: Røyksopp
Favorite TV-series right now: Discovery Channel

Social media

Twitter: https://twitter.com/webmaxru
LinkedIn: https://linkedin.com/in/webmax
Speaker profile: https://sessionize.com/maxim-salnikov

Me attending CES expo in Las Vegas

How did you get started with coding? (for example, what is the first thing you remember developing, and where did the road go?)

I believe it's a classic story of the computer geek. I understood that programming is "my thing" during the first lessons of Basic in the school - I was especially excited by the programmatic drawing of the objects. Then I was deeply engaged with Pascal/Delphi (C++ to a lesser extent) in the University (again, in different v-teams I was always responsible for the visual and UI parts of the project). So it was natural for me to immediately become a "webmaster" in the late 90s when I discovered Internet: HTML, CSS, and obligatory JS-powered animated mouse pointer tail :) Approximately at the same time, I built my first commercial projects driven by Apache+PHP+MySQL (LAMP stack).

My developer career was always connected with the Internet and UI: I spent many years by developing SaaS e-commerce solutions as a Frontend Lead, then migrated legacy Win32 solution to the web stack using Angular as a Senior Developer, and ended up as a Fullstack Developer for the digital identity company by building end-to-end PoCs where IoT sensors sent data to the web UIs in the realtime.

After moving to Norway in 2011, I discovered a meetups scene. I started to visit the events, then to help organizers, then to build userg roups and run events myself. A bit later, I started my technical speaker journey and now I deliver around 30 technical sessions per year. Then, based on the experience I gathered by running meetups and attending events as a speaker, after finding soulmates to build the teams, I co-founded two full-scale developer conferences: Mobile Era (HQ: Norway, topics: mobile development in the broadest sense) and ngVikings (HQ: Nordics, topics: Angular framework). With all these community-focused activities gradually appeared in my life...

What are you working on normally, and what are you working on right now? (what product with which technologies, etc.)

...In March 2019, I naturally shifted my career gearbox to the Developer Relations with the focus on Azure cloud (before that official move, running developer communities and conferences, technical speaking and blogging were my fulltime hobby). So when the time comes to write the code, I mainly do it for the different web and cloud use cases to support my technical demos, talks, training.

For example, an Angular app to showcase Azure Static Web App service during my live demo at NDC Oslo 2020. Or my blog to show cloud deployment of a statically generated Angular/Scully app. By the way, the English version of this interview is hosted on this blog and there is a new automatic build on every push of the corresponding markdown file.

Also, I traditionally build and support the websites for the conferences I mentioned: Mobile Era 2016-2020, ngVikings 2017-2020. For the recent editions of these, I use Hugo static site generator. Another recent mini-project: I built an Azure Function using NodeJS to generate a digital badge for every attendee of ngVikings 2020 (I believe I suddenly invented such a thing as badges for the online conferences!) and put it on the webhook of our ticketing system. Folks loved to get a badge right after the ticket registration! On the day of the event, Twitter was full of these pictures shared :)

Right now, I work on the demo of the background services of Progressive Web Apps for my next technical talk.

Delivering a technical session from home

What does a typical workday look like to you “these days”? (are you at the home office, how do regular meetings, work tasks, etc. work)

My work is all about building the strategy and communication. So only the target channel and media changed but not the core. Now, I have meetings with my colleagues, with the local and global community organizers, with the developers who want to learn more about the cloud - from my kitchen or terrace. From the same places, I speak at the conferences worldwide these days - I think the number of my speaker appearances has only increased last months!

What would you like to learn more about in the future? (for example, new technologies you are curious about, languages you want to try, new disciplines you want to test, etc.)

My developer's passion is Web and Progressive Web Apps in particular. I scrupulously follow all the updates in this area, and there are always many things I want to learn and experiment with, for example, early drafts and Trial Origins of Web Capabilities APIs. Also, after Flutter for Web release, I want to try this framework and Dart language which drives it.

What specific tools can't you do without? (for example, specific programs and editors, editor plugins, build tools, database solutions, hosting services, etc.)

VS Code + Azure cloud extensions + "must-have" developer extensions like Prettier, Live Server, Import Cost, Peacock.

In the studio: recording videoshow for the developers

What is the worst thing you can be asked about at work? (for example, tasks you think are tedious, systems you don't like to work on, technologies you think are bad / difficult / tedious, etc.)

Not at work, but from my conference co-organizers: "the website shows older version, we need to fix it asap!" (that means I made something wrong again in my "genius" but quite an experimental Service Worker and have to revert it back, which is a challenge in this scenario :)

What do you think Norwegian developers should be better at?

Developers in Norway are very strong professionals, and I'd like them to share their knowledge and experience more often at the community events. As a meetup organizer, I always look for the speakers, and sometimes it's a challenge to find local folks. Now, with all the gatherings went online, it became simpler to invite speakers from other countries but I want to grow vivid technical speaker community in Norway.

What do you like to do when you're not working? (do you develop something in your spare time, also? hobbies?)

Besides running community meetups and developer conferences in my free time, I love traveling (now within Norway), alpine skiing, and producing music using my synth.

Let's stay connected

I'll be happy to hear from you. Feel free to send me a couple of lines if you:

Want to know more about the developer community in Norway
Need advice on your technical speaker or community organizer journey
Have technical questions about PWA, Angular, Azure
Want to invite me to speak at your technical event
Wish to learn more about cloud technologies from Microsoft

The easiest way to reach out to me is to send a direct message on Twitter or LinkedIn.

Inspiring Stories: Benedicte Raae

Maxim Salnikov — Wed, 15 Apr 2020 13:12:54 +0000

As a society, we tend to focus on titles and roles, and we forget that behind each title there is a person who has a story to tell. And truly every person’s story is unique.
In honor of International Women's day, we interview inspiring women from the community on the story of how they got into Tech, and where they are today.

In this post, I interview Benedicte Raae, who is based in Oslo, Norway.

Meet Benedicte

I’m Benedicte of Lilly Labs. I’m a computer scientist living in Oslo, Norway and have been an independent software engineer for almost a decade. I have clients in both the private and public sector in Norway and also a few international clients.

I love to create robust, user-friendly tools using web technology. My current favorite is Gatsby, a React framework.

Right now, I’m developing a privacy-first period tracker called POW! launched March 8th. The level of detail I found in existing apps made me less inclined to use them; it felt creepy, a little invasive even. And last year, the feeling was backed up by reports that several of the most popular tracker apps were selling or sharing data they collected with third parties such as Facebook.

So I spent 2019 answering the question: “A privacy first-period tracker? Is it even possible?” It led me to learn about encryption in web applications and to share my new-found knowledge at JavaZone, Mobile Era, JSConf Budapest, and RuhrJS. 

I also realized I just had to make a pass at making one. In addition to keeping your privacy safe, I hope to also give the control back to the user. POW! leverages hashtags to let you track the things you are interested in using a language you are familiar with.

Twitter: @raae
Instagram: @raae.codes

When did you first become interested in technology and what sparked this interest?

My mother is a mechanical engineer but worked as a developer for most of her career, before transitioning to a managerial role. This gave me early access to computers. I remember us connecting to the Internet over a noisy modem, while I was still in elementary school, only to check vg.no and waiting forever for it to appear. I was not very impressed.

However, at 13, my Norwegian teacher introduced me to HTML and CSS. Also, the Internet had become a lot more fun. At 16, I was responsible for Foss revyen’s first website and needed JavaScript to create an image carousel. I have never spelled height wrong again after spending hours debugging the code.

I am more interested in what we can create with technology than the technology itself. And lately I've been even more interested in what we probably should not make, even though we could.

What education do you have?

Master of Technology, Computer Science, from NTNU (Norwegian University of Science and Technology).

Describe your way towards your first job in tech; how did you land this job?

I was a summer intern at Iterate and after finishing that and graduating in 2009, they offered me a job. At that time, this situation was typical for most of my class.

Do you have any role models that influenced you?

My mother, and the other ladies working with her. They normalized the whole “women in tech thing” to such a degree that it took me years to realize others had questioned their right to be here much more than I've ever had.

My grandmother, co-founder of Kronborg Leverpostei and women’s rightist activist who was a force to be reckoned with until the end. Both my daughter (Lillian) and my company (Lilly Labs) are named after her.

David Heinemeier Hansson, founder of Basecamp, who has created a thriving tech business focusing on paying customers and is taking a stand against surveillance marketing.

And many, many more.

Who were/are the biggest supporters in your career?

My partner Ola and my good friend and cheerleader Marit Letnes!

I also find support in the Slow Business Community (led by Torill Bye Wilhelmsen), where the focus is on building businesses we enjoy, while running them. This as opposed to the hustle, hustle, hustle, and then flip mentality prevalent in tech.

Tell us more about your current job – e.g. what do you like most about your role?

I really enjoy and need the freedom of being an independent developer!

At the moment, I split my time between POW! and an engagement creating a web application, in React, for a Scandinavian defense force. 

I often work long term, but not full time for my clients. It’s a win-win; I keep the outside perspective that clients often need, while being a stable resource on their projects.

What does your typical day look like?

I take our daughter to kindergarten, then head to a coffee shop to work remotely or go to the city center to work at my current client’s office. I try to, and most often do, get several hours of uninterrupted time to code, giving me that sweet flow feeling.

What do you do in your free time?

Being independent, there is not as hard a line between work and free time. 

I love to code, and you can find me spending an evening at the local café coding on something fun, like POW! while enjoying a glass of wine. But you can also find me mid-week taking a break from everything just reading a book.

However, I have started horseback riding again after 20 years, and it’s a blast: “Hest er fortsatt best.” 

What advice will you give to women and girls who dream about a career in tech?

Do it, join me, you belong!  

Inspiring Stories: Monica Beate Tvedt

Maxim Salnikov — Sun, 15 Mar 2020 10:56:29 +0000

In this post, I interview Monica Beate Tvedt, who is based in Oslo, Norway.

Meet Monica

My name is Monica Beate Tvedt, Head of .NET Development at Sopra Steria, entering a new role as Partner & Director of Technology. I'm also the owner of the Scandinavian Microsoft Developer Community at Sopra Steria and organizer of Oslo Xamarin Meetup. 

I was a keynote speaker at this year's Women in Tech Summit, where I talked about my journey from being a single mom with no education, to where I am today, a hands-on technology director, doing what I love - trying to encourage more women into tech.

As programming is my greatest passion, I strive to contribute back to the development community by giving tech talks and hands-on workshops. Next up is the Global AI on Tour 2020 the 4th of April at Microsoft Oslo, where we will teach you more about Azure's AI and Machine learning services.

Twitter: @monicatvedt
Facebook: Monica Beate Tvedt
LinkedIn: Monica Beate Tvedt

When did you first become interested in technology and what sparked this interest?

I’ve always been very visual. Growing up, I loved solving number-, pattern- and logical problems, at the same time spending a lot of time drawing cartoon characters, as I was fascinated by Walt Disney and how they drew each frame to animate a given gesture.

Being a kid from the 80s, I also play a lot of video games (Atari, Nintendo), again fascinated by the animation, the logic, and graphics used. When we then got our first computer it was only a matter of time before I created my first website showcasing my drawing and animation skills. Programming enabled me to do what I loved the most, solving both logical problems and being creative in designing user interfaces. There’s really nothing quite like it...

What education do you have?

Computer Engineering - Software development.

Describe your way towards your first job in tech; how did you land this job?

I started out as a freelancer in 2001 before I took my engineering degree. I created websites for family and friends, and asked local companies if they needed help going digital. It was literally a door-to-door job, often being rejected, but every time I didn't, I made sure my work was added to my online portfolio, building my brand.

I then started volunteering as a teacher assistant in multiple engineering subjects and one day I was asked to do an interview for a school paper where I talked about my passion for software development. I did the interview and later I got a phone call from a company who had read my story, asking if I would come work for them. Which I did.

This is why I cannot stress enough the importance of showcasing your work and your passions, as this has been the recipe for almost every one of my job offers ever since.

Do you have any role models that influenced you?

Bill Gates and Warren Buffet. I loved them when I was growing up - their mindset, their business acumen and what they achieved. I was, and still am, in absolute awe of their accomplishments...

Who were/are the biggest supporters in your career?

It has been a somewhat lonely journey, being a woman in the tech industry. But time has changed and today I’m very thankful for the enormous support I get from the Oslo tech community, and the people I work with day to day. 

I would especially like to mention Eirik Lie, Kjetil Kværne, and Hilde Solberg Holm, who have all made their impact and let their support be known, each in their own way. They're hard-working and talented individuals, bringing out the best in others - it really is all about having the right mindset!

My two beautiful children have also been a huge motivation, making me work even harder trying to achieve my goals.

What does your typical day look like?

Lately, I’ve been working on a project for Kværner, where we developed a new mobile app at the same time as running our .NET departments at Sopra Steria. 

A typical day running our .NET departments will start with me checking our department's current productive billable rate, noting any planned deviations preparing for next month's business review, going through our department's profit and loss.

Then off to meetings about the relocation of resources, bids, and new leads. Throughout the day I follow up with my consultants, making sure they thrive at work, answering any questions they may have. Depending on my main focus of the day, I’m spending the rest of the day either planning our next community meetup with our community leads, preparing slides for a department meeting, taking actions on my department's current strategy, interviewing .NET developers or advising our customers on what to do next. 

When working as a developer at Kværner, the day is quite different, starting with us fetching a cup of coffee or opening a can of Monster Energy, catching up during our daily stand-up and then just enjoying ourselves coding all day, making awesome apps. Working Lean in autonomous teams using Azure DevOps, building our apps using .NET Core, Xamarin and Azure, all while getting continuous feedback from our pilot users.

What do you do in your free time?

I’ll proudly admit I’m mostly at my computer: programming, learning new things or playing chess at chess.com, often simultaneously while watching a movie. There is no shortcut in this business, so you need to put in the hours and most importantly not feel guilty for doing so or feel the need to apologize for it. Do what you love and do more of it. When my laptop finally runs out of battery - it may happen - I enjoy playing tennis, eating out or going skiing.

What advice will you give to women and girls who dream about a career in tech?

Start building your brand today. Document your journey both for your own motivation and for future employers to see. Do more volunteering work for the Tech community and say yes more often, but only if it will add real value to your CV. If you get an opportunity but you’re not sure how or if you can do it, say yes. You will learn as you go, but the opportunity may not come again.

Remember that you have all the cards, so try to play them well. There are too few software developers out there so the world is yours if you take the time and effort to become really good at it. 

There are not that many women in Tech, so if you are ever in the need of advice, are stuck programming a school assignment or at work, just give me a shout on SoMe and we’ll try to solve it together. I would love to help in any way I can, so do not hesitate to reach out! 

Inspiring Stories: Kristina Simakova

Maxim Salnikov — Tue, 10 Mar 2020 10:03:21 +0000

As a society we tend to focus on titles and roles, and we forget that behind each title there is a person who has a story to tell. And truly every person’s story is unique.
In honor of International Women's day, we interview inspiring women from the community on the story of how they got into Tech, and where they are today.

In this post, I interview Kristina Simakova who is based in Oslo, Norway.

Meet Kristina

Kristina is an independent IT consultant based in Norway. She is a Google Developer Expert for Android & Maps and has a keen interest in AR, ML and computer graphics. By day, she writes Android native code in Kotlin and by night, she blogs at creativetech.blog about AR and helps organise GDG Oslo events and support the Women in Tech Oslo community.

Twitter: @KristiSimakova
Facebook: Kristina Simakova

When did you first become interested in technology and what sparked this interest?

I was always interested in technology in general and I got interested in programming during my bachelor study in a computer graphics course.

What education do you have?

Master of Science - Computer Engineering

Describe your way towards your first job in tech; how did you land this job?

I have a major in Computer Graphics and after finishing my masters I was looking forward to working in this field. I applied for a few positions and there was one that I really liked where I would work with creating ship and crane simulators for training. Fortunately, the company gave me the offer.

Do you have any role models that influenced you?

There are a lot of people that influenced me throughout my life: from my math teacher to the founder of my previous company. From the people everyone knows, I want to mention Richard Branson. His spirit and adventures inspire me.

Who were/are your biggest supporters in your career?

My mother is my biggest supporter of all.

Tell us more about your current job– e.g. what do you like most about your role?

I am an independent consultant focusing mainly on Android development. I usually join an existing team of developers for 6 months or a longer period of time. I am currently working for a Norwegian mobile payment company.

What does your typical day look like?

On a typical day I would be at my customer's office. As a part of the project, I help develop Android applications. In the morning, we have a short team meeting and occasionally other meetings during the day. I use most of my time writing code in Kotlin.

What do you do in your free time?

I enjoy traveling and walking around in a new city. I like cooking Asian cuisine and making gluten-free desserts, which helps me clear my thoughts.

What advice will you give to women and girls who dream about a career in tech?

Start with building small projects that you would use yourself and keep learning.

Inspiring Stories: Victoria Bergquist

Maxim Salnikov — Sun, 08 Mar 2020 13:31:39 +0000

In this post, I interview Victoria Bergquist who is based in Oslo, Norway.

Meet Victoria

My name is Victoria and I'm a Frontend Engineer at Sanity.io. I'm from Oslo, Norway, but only recently moved back to Norway after living abroad for almost 8 years. Alongside work I enjoy being a part of the developer community through Twitter, meetups, events, and conferences. While I'm actually an introvert and often prefer to spend time at home, I find it very rewarding to organise events and spend time helping others around me. That is why I started two meetups in Frankfurt, organise and speak at events and conferences, and volunteer as a Chapter Leader for Vue Vixens, an organisation dedicated to helping women and those who identify as women learn Vue.js.

GitHub: @vicbergquist
Twitter: @vicbergquist
CodePen: @vicbergquist

When did you first become interested in technology and what sparked this interest?

In high school I chose to do vocational studies in media and communication, with classes in design history, advertisement, journalism, photography, and more. We had to keep a blog/portfolio for a lot of our assignments and homework, and that's how I was first introduced to web technology. I struggled a lot to find a theme for my portfolio and blog, so I started looking into the code just for fun. HTML and CSS weren’t completely new to me, because my friend was taking a web design class and had been showing me what they were doing. However, I thought it sounded kind of boring, and instead learned a little about HTML and CSS on my own to customise the theme for my blog/portfolio. I had so much fun doing this and was at it for hours several times a week, but after spending a year in Japan and switching to general studies when I was back in high school in Norway, I went on to study languages and linguistics at university in Australia. I completely stopped coding and didn't touch or think about it for almost 7 years, before I got back to it after finishing university and needed to figure out what to do next!

What education do you have?

I have a Bachelor of Arts with majors in Japanese and German, and electives in linguistics, neuroscience and psychology from The University of Queensland in Brisbane, Australia.

Describe your way towards your first job in tech; how did you land this job?

I was very happy with my studies and had a great time at university, but had no idea what to do after I graduated, so I tried a few different things. I went to Design School, but dropped out because it was too expensive. Then, because of my interest in coding from high school and languages, I started a Master's Degree in Linguistics and Web Technology. However, I dropped out before the first semester ended. The university just wasn't the right fit for me, so instead I decided to continue learning how to code on my own. I started spending all my time learning web development by completing various projects on freeCodeCamp and getting really into CSS. Eventually I also joined Twitter and began the #100DaysOfCode challenge to accelerate my progress, and began to code every day.

During this time, I was putting in a lot of hard work and applied to various junior roles, but kept getting rejected because of my lack of experience and untraditional background. This was very discouraging, but then out of the blue a company contacted me about a frontend developer role they were hiring for. Apparently they had found me on Stack Overflow and had seen my CSS work on CodePen! I managed to find the job ad they contacted me about and it said that they were looking for a JavaScript developer, which was disappointing. I didn’t want to do JavaScript, so I emailed them back and said I wasn’t interested. I was having so much fun with CSS and instead wanted a job where I could do that. Lucky for me, they told me to disregard the job ad and simply wanted to talk to get to know me.

I ended up meeting them a week or two later, and the interview lasted quite a while. They wanted me to share my story and what I was passionate about, and said they wanted to hire their first frontend developer with a passion for the craft. Despite my lack of experience, they admired the progress I had made in such a short amount of time and how excited I got when talking about CSS. The day after, on day 87 of #100DaysOfCode, they called me back and offered me the job. Despite having no professional experience, they said they knew I would learn what I needed to learn on the job and thought I'd be a great addition to the team! So I become their first frontend developer, a junior and a lead!

Tell us more about your current job– e.g. what do you like most about your role?

Where to start! I'm really excited about all the things I get to do at Sanity, like building APIs, tooling and working on Sanity Studio, an open-source content editing environment. I also love the fact that I’m able to continuously learn and explore new technologies. Sanity is used as a content backend for so many fun and interesting projects both by us internally and the community, like real-time quizzes and voice assistants, so seeing these things that people make with the product that I'm working on everyday is incredibly motivating and inspiring. It makes it so much fun to go to work!

What does your typical day look like?

My cat usually wakes me up by walking all over my face between 4 and 7 AM, and if that doesn't happen, my other cat wakes me up around the same time singing the song of her people, until someone goes to cuddle her. I quite enjoy being at the office around 8, but I often only go in around lunch in order to spend time with my cats before a day at the office. When at work I enjoy spending time talking with my colleagues. Everyone enjoys sharing what they are working on and the challenges they are facing, which almost makes you feel a part of all the projects at once, and that inspires me every day. In between work, we also play foosball to relax and have fun. I'm currently losing a lot, so I'm playing less than normal these days!

On a typical day I also do a lot of pair-programming with my project partners. Parts of our code base are still very unfamiliar to me, so working closely with someone who knows it better may be the favourite part of my day. Other than that, I also have a few meetings, often with people in San Francisco, before I head home for the day around 4 or 5 PM. But I also often forget to go home when I should, because I'm having such a good time at the office!

What do you do in your free time?

I code more than I should! I enjoy my job, so I struggle to put it away. To distract myself I like to watch TV shows, cook or bake, hang out with my cats, and play board games. Right now I'm doing clicker training with one of my cats, and try my best to stay away from coding and social media for my health and to do things I enjoy. I also organise meetups, however due to moving and health reasons, I haven't been able to do it as much as I'd like, but I'm really excited about starting it again soon!

What advice will you give to women and girls who dream about a career in tech?

There are so many ways into this industry. Don't let anyone tell you that you need to follow one specific one, or that you can't do it with the background you have. Your are what the industry needs in order to be the best it can be, whether that's with a CS degree, or not.
There's no doubt that being a woman in tech is hard, but women from your area and all around the world are there to help you on your journey. To find them, join communities for women in tech, local ones or online. I've met so many incredible women this way, and they have helped me get to where I am today.

Workbox 4: Implementing refresh-to-update-version flow using the workbox-window module

Maxim Salnikov — Thu, 28 Feb 2019 01:21:48 +0000

The next major version of the very popular PWA helper library was just released. Workbox 4 brings many interesting additions to the existing modules and only a few minor breaking changes. Also, it ships one totally new module called workbox-window, to fulfil the need of developers in a simple and powerful way to register the service worker, to hook into its lifecycle, and to provide a bi-directional communication channel with the app. This is the first module of Workbox to be used in the window context, i.e. in our application’s (not service worker’s) code.

Let’s explore this new module to check what will it take to build the well-known “refresh-to-update-version” technique — one of the UX best practice for PWA. As we use this flow often while building our applications, and Workbox exposes the corresponding tooling now, we just need to find a simple and robust code to build that flow. This article is my try to find that code: minimal and stable. But first, what is this flow I’m talking about?

Refresh-to-update-version 101

You open some website. And after a couple of seconds, it shows you some prompt/dialogue saying “A new version of this website is available. [Refresh the page to get it]”. In most cases that means:

This is a service worker-driven origin (if it also has Web App Manifest we can call it PWA), and the UI you see was not fetched from the network but was taken from the Cache Storage of your browser
You visited this website using this browser some time ago
Between the previous and current visit, the deployed version was updated

The dialogue you see is a sort of trade-off between the possibility to show app UI immediately, without fetching it from the network (using precached version) and the need to deliver the actual version of the app to the user after all. Where is the compromise then? It’s in the fact that we still load the precached (“old”) version of the app from Cache Storage, but if the service worker knows that there is a new version available, it fetches the updated resources, updates cache and sends a message (using Broadcast Channel API or postMessage) to the app. Where we catch this message and show the notorious “The app was updated. Click refresh to upload” message to the user. Next page load — and we serve the “new” version from Cache Storage (of course, if our service worker performed all the listed above operations in a proper way).

Another variation of this technique — we do not send any signal from service worker but listen to the changes of its lifecycle in our app. For our case, the combination of onupdatefound and onstatechange events caused by the fetching of byte-different service worker could mean the change of hash sums of the resource(s) mentioned in “to precache” list injected in service worker. Which, in its turn, means that the new version of the app was built — so we can safely show “The app was updated” message.

Workbox v3 options to have refresh-to-update-version flow

First, let’s say thanks to the Workbox maintainers for the magic precacheAndRoute() method we could use in our own service worker. This method takes care of all the complexity of precaching, version maintaining, fetching updated resources, updating the cache etc. We just pass the object with resources and their hash sums (built by another helper from Workbox family — workbox-build module) and it works. Furthermore, another line of code in the service worker:

…and we can receive the signals about the precached resources were updated in our app code — exactly what we need to show the message to our user:

We can even add the same plugin to the resources we cache during runtime to follow their updates if needed.

Why do I tell about the option we use in Workbox 3 in the article about Workbox 4? Because it still works fine — your code from v3 related to this flow will not break.

What about the second option — when we rely on the service worker lifecycle events? In v3 we don’t have any helpers to actually register our Workbox-driven service worker in our app code and subscribe to its events. Of course, we always can write this ourselves or use the really nice register-service-worker library by Evan You, then the code in our app could look like:

But now we have way more powerful, flexible and truly Workbox-native way to achieve it: workbox-window module. As stated in the documentation, The key features/goals of this module are:

To simplify the process of service worker registration and updates by helping developers identify the most critical moments in the service worker lifecycle, and making it easier to respond to those moments.

To help prevent developers from making the most common mistakes.

To enable easier communication between code running in the service worker and code running in the window.

Let’s implement the above UX trick using this module.

The refresh-to-update-version flow powered by workbox-build

Let’s start at the very beginning. To demo the flow, we need to implement a service worker with precaching and serving the resources forming our application shell.

The minimalistic version of the Workbox-powered service worker source file could look like:

Lines 8 and 9 are important in the context of this article. You will read later why do we need them

Why is this “source file”? Because we have to process it after every build of our application. To be precise — we have to inject the list of resources to precache and their hash sums as a parameter for precacheAndRoute() method (instead of this empty array). To save us from this boring task Workbox has 3 options to choose from: Workbox CLI, Webpack plugin, and Node module. The last one is my choice: it needs neither globally installed CLI nor Webpack configuration file exposed. Installing the workbox-build module:

npm install workbox-build --save-dev

Now the service worker build script:

And the final part — is to add the npm run script combining the build of our app and service worker, one after another:

As you might notice, I use an Angular app in my example (ng build --prod is a build command for it) but everything I describe in that article about Workbox modules and PWA techniques is applicable to any JavaScript application.

After I do npm run build-pwa I see something like

Generated dist/angular-pwa/service-worker.js, which will precache 6 files, totaling 735289 bytes.

And the service worker in the distribution folder now contains all the info Workbox needs to know about our app:

It would be the same in Workbox 3. But now the difference starts: let’s register this service worker in our app using workbox-window. Installing the module first:

npm install workbox-window

Hint: there are different scenarios of importing/using/bundling this module available.

Now in our application code:

Some important things to notice:

There is no service worker feature detection in register() method, so don’t forget to have this in your code (line 3). At the same time, the delaying of the registration until the window.onload event is included, so we don’t have to add this extra wrapper.
Where exactly to put this code in your app? The later — the better. Have it after your app was fully rendered for service worker not to compete with the main thread for the network and CPU resources. For Angular apps, the best place will be in then() block after bootstrapModule() call in main.ts file.

Time to run our app in any static http server. I use serve:

Running the PWA

This is exactly what we expect: the service worker was registered, some files were precached. Now if you shut down the server or check Offline checkbox in DevTools — the app will still be available. Thanks to our Workbox-powered service worker serving the resources from the Cache Storage.

Hint: to have much more detailed log just set the corresponding logging level in DevTools — see the Default levels dropdown in the right bottom corner of the screenshot.

It’s time to update something in our app. Let’s change the title to Angular PWA 6. Build/deploy/serve/refresh the page: you still see Angular PWA 5. Hit browser’s refresh button once again — now you see the new title. This was expected and our goal is to give the user a hint that the app was actually updated while they see the older version. One of the listeners exposed by workbox-window called installed will help!

Now on every application update, we’ll see the prompt:

Refresh-to-update-version

Some notices:

We have an extra condition in the code — event.isUpdate. It’s there because we don’t want to show this message on the very first service worker installation, only on the updated. The inversion of this condition is a good option to show a message like “This app is now ready for the offline usage”
The described approach works ONLY if we are good with modifying the service worker lifecycle by skipping the waiting phase (see lines 8 and 9 in our service worker code). Without this modification the new service worker will not be activated until the user closes all the open tabs with this app — as a result, they will see the old version until that. If for some reason skipping activation step is not an option for your project — please use more general (and more complex) option mentioned in the documentation.
Please, don’t use JavaScript’s confirm() method in production :) It’s in the sample code only for simplicity. Use the less obtrusive and non-blocking toast/snackbar from the UI library you use for your application.

Awesome! Now we have pretty laconic code helping us to register service worker and catch the proper moment when to show the message about a new version is available.

Of course, workbox-window has lots of other useful events helping us to have full control over the service workers: both “internal” (registered by workbox-window) and “external” — all others, for example from some 3rd party services providing Push-notifications. Also, it gives a convenient option to communicate with the service worker which will be extended and standardized by the release of the workbox-messages module.

To sum up:

Workbox 4 was released — production-ready library for the PWA’s main network tasks automation
The new module workbox-window gives developers a convenient way to register service worker and listen to the events of its lifecycle
We discovered the proper event to react on for showing the message to the user for the refresh-to-update-version flow

So, let’s try the brand new Workbox 4 and its workbox-window module! If you find any issues, please report. If you wish to know all the latest news about Workbox and PWA in general, please follow me on Twitter webmaxru and join PWA Slack team. My direct messages are always open for your technical questions and invitations to speak about PWA/Workbox at your conference or hold a PWA workshop for your conference/company.

Background Fetch API: Get Ready To Use It!

Maxim Salnikov — Fri, 30 Nov 2018 08:49:15 +0000

I had a section with the explainer of Background Fetch API in many of my PWA slidedecks I presented during the last 12 months. It’s in “Upcoming Features” chapter of my “Advanced Service Worker” session, and I only introduced the basic concept and had some code on the slides. The late evening before the day of my talk at HolyJS conference I decided to check the state of this promising API at ChromeStatus.com and in Chrome Canary (I love to report all the latest statuses during my sessions) and… I didn’t sleep much that night — I found the latest API spec in the almost working state and dedicated some hours to the experiments. This article is about the idea of background fetch in service workers and about how to start using it now.

Disclaimer: Background Fetch API is still very experimental. It has only the rough specification proposal and partially working implementation in Chrome Canary (M72) with Experimental Web Platform features flag enabled. All the concepts/interfaces/methods/events might change in the future.

What is Background Fetch?

If we look at the Progressive Web Apps concept from “filling the gap between web and native apps functionality” point of view, this API brings manageable and predictable downloads and uploads of the large assets (sets of assets to be precise): files, resources, you name it. Large enough to start worrying about the possible network interruptions, and/or script timeouts. For example, storing locally MP3-files of your music streaming service, or podcast episodes, or maybe even some videos, or large PDF-files.

You might say that we do it for years without any service workers — just click a link to the file and the browser will do the rest: with the possibility to pause, cancel and restore the download. You are right, but you download this resource to the operating system’s context (file system), not your web application. Everything we get from the network using Background Fetch API we can store in the context of the corresponding app for later use without any extra hassle.
Now you say that we can achieve the same by just using the fetch event of the service worker. Yes, we can download some file and put it into app origin’s Cache Storage (and this is what we normally do for the app shell architecture and runtime API endpoints caching). The differentiator here, again, is the size of this resource — is there a chance that the browser will kill the service worker during the download because of the timeout. Also, from the UX perspective, it really makes sense to notify the user about the download fact and its progress.

Background Fetch is here to solve the large assets download/upload issues in both developers and users friendly way. Let’s have a look at the features of this API listed at the WICG’s (Web Incubator Community Group) repo playing the role of specification proposal:

Allow fetches (requests & responses) to continue even if the user closes all windows & workers to the origin.

Allow a single job to involve many requests, as defined by the app.

Allow the browser/OS to show UI to indicate the progress of that job, and allow the user to pause/abort.

Allow the browser/OS to deal with poor connectivity by pausing/resuming the download.

Allow the app to react to success/failure of the job, perhaps by caching the results.

Allow access to background-fetched resources as they fetch.

In simple words: after we registered a background fetch and initiated the transfer by this fact (it could be done both in our main thread and in the service worker) we are fully covered by the browser (or the platform) possibilities. During the transfer, we can close the tab with application — the transfer will not stop. We can close the browser — the transfer will continue after the browser restart. The network may go down — the browser will continue the transfer automatically after it’s up. The results of the operation will be sent to the service worker (as the application tab might be closed by that time). And despite this API’s name, it’s not 100% “background” operation as it gives to the user the clear understanding about something is going on.

The feature set looks really interesting, let’s start coding to see how that works and how that looks like!

Background Fetch MVP

We start from the very minimal solution, just to check if that works at all. The plan is the following:

We register a service worker
We register a background fetch in our main app by clicking the button
We listen to the background fetch events in the service worker. On success — we put the asset(s) into Cache Storage. On fail — we still try to put into the storage all we might get

Disclaimer: to focus on our today’s topic we will not create a PWA in its full sense (there will be neither app shell nor web app manifest), so we can formally call our project a “service worker-driven website/webapp”.

Minimal code to see the download starts

The code for Step 1 is below:

On the app start, we register a service worker file service-worker.js. Please note that even for this demo I use the best practices for the registration to just emphasize the importance of:

Feature detection — to not break the app in older browsers. Good manners for most of the PWA features.
Registration postponing until window.onload. Well, in our case we don’t have any other resources to load except index.html itself, but let this proper registration snippet be a reminder about the fact that service worker cannot improve the first-load experience, but it can easily make it worse.

On “Store assets locally” (“Download” term does not 100% correctly reflect the action we perform) button click we call backgroundFetch.fetch() of the active service worker registration. It registers a background fetch and immediately initiates the transfer.

In our service worker, in addition to utility install and activate events (to simpler track the lifecycle stage), we have only one useful event handler at the moment: backgroundfetchsuccess where we output the registration object of the event. Let’s see it in action! For our example, I download 1,39 GB movie file (to have some seconds to watch the flow) from the same origin using http-server static webserver on Mac OS. (A reminder: we have to use Chrome Canary M72 to test Background Fetch API)

We download the file using Background Fetch API

Yes! It works! We see our file downloading in the browser’s bottom bar (where we normally see the regular downloads). So what happens if:

You close the tab with the app: download will continue, you see it in the bottom bar.
You close the browser (by clicking x button): the closing confirmation will appear. If we confirm — the download will still continue, now the status is on the browser’s icon:

Chrome is downloading the asset without the window open

You unload the browser from the memory (by choosing Quit from the right-click menu): download will stop but will continue after you launch the browser again.

Awesome! We have a download mechanism which is persistent across the app status and browser restarts. We can even Pause/Cancel this transfer:

Using standard browser download UI to manage background fetches

There is only one issue: we download this asset to… nowhere! Because it’s up to us — what do we want to do with these bytes received. Time to implement it!

The code to store the received data in the Cache Storage

We take the sample code from Background Fetch API proposal repo in the simplified form for now. At the same time in our main app let’s add the second asset to download to the same registration of the background fetch — it’s possible according to the spec.

Let’s split it into steps:

Button click in index.html: we register a background fetch with the ID my-fetch and the array with two files as a target. We can pass the array of URLs (this is what we do) or Requests (useful for upload usecase) there. Right after the browser starts executing this request (download).
Download ready in service-worker.js: service worker gets backgroundfetchsuccess event where we:

Open (or create) the cache with the name equals background fetch registration.id. The cache name could be any string actually.
Get all the records of this background fetch using registration.matchAll(). Each record = URL/Request we listed during background fetch registration.
Build the array of promises by iterating through the records, waiting until record’s responseReady resolved and trying to put this record’s response into the Cache Storage.
Execute the promises

The result:

Downloading two large files

We see how the downloading is beginning and “Usage” chart is updating. During the download time we have our data in “Other” category, then (on cache.put()) it’s moving to the cache. If we open “Cache Storage” section we’ll find these two large files (1,39 GB and 140 MB) there — now we can intercept the requests to these and serve them from the cache!

There is another thing. According to the specification, the browser should show the “Download multiple files” confirmation dialogue like this:

Native confirmation dialogue

Sometimes it shows up but most of the times it’s not there. I tried to change the origins, reset cache, use different assets in the background fetch registration but was still unable to reproduce the sustainable popping up of this window. Most likely it’s the bug of the current Chrome Canary build. Anyway, I can explain how that works: if you click “Block” you change the setting for “Automatic downloads” for this origin and you see the corresponding icon in the address bar:

This is why we have the alert() with the explanation of how to fix this in the catch block of background fetch registration. Most likely the possible error’s cause is exactly this setting.

The last comment related to the code. Why do we disable the “Store assets locally” button if the background fetch registration was successful? To avoid another possible error: double registrations with the same ID. If the first registration is active (performing the network transfers) the second registration with the same ID will be rejected. After the transfer completion, the corresponding background fetch registration to be removed and we can enable the button (not implemented at this moment) if we wish to give the possibility to perform exactly the same operation like the just completed one.

Some observations:

The transfer appears neither in DevTools -> Network tab nor Downloads section of Chrome Canary. In that sense, it’s 100% true background fetch.
Turning on “Offline” checkbox in DevTools -> Network tab doesn’t affect the transfer.
Resuming of the download after unloading the browser from the memory works weird. The transfer starts again but the flow stops after every status change: after downloading the first file you have to restart the browser to start downloading the second. After downloading the second file you have to restart the browser to call backgroundfetchsuccess event. I hope this will be fixed in the release version.

So almost all works good but looks not very user-friendly: not very informative to be precise. Let’s use the possibility to provide some meta-information about assets and to track the progress.

Organizing a better UX

Let’s externalize the JSON with meta-information about the asset set we want to register and add some extra features to our main app and service worker:

What was added:

JSON file with some settings (meta-information about this asset set). We fetch this data both in the main app and service worker. In real life, this could be a call to your backend API — to get the settings of this specific asset set based on its ID (hardcoded as 'series’ in our code).
index.html: we now pass the options optional parameter to the background fetch registration containing thetitle, icons, downloadTotal — pretty much self-explanatory properties. Also, we attach progress event listener to the background fetch registration where we have an access to downloaded property which is changing with some periodicity.
service-worker.js: both on success and failure of the main operation we update the download indicator with the current status and the title of the background fetch we specified in JSON settings file. Of course, instead of this optional title property we could use background fetch registration ID both for the main app and service worker messages, but this ID is not for the UI (it can be a long auto-generated unique hash-string for example), so it’s a really good idea to have the human-friendly title provided.

Now we have a full control over the texts and user informing. Some notices:

I was unable to make the custom icons showing up. Maybe this feature was not implemented yet or I use the wrong object format.
The downloadTotal property we pass during the background fetch registration is the total number of bytes of the whole set. It’s also optional. If passed, it works as a guard — we’ll get backgroundfetcherror event in the service worker if the total size of the resources is larger. Also, it’s a good helper for our UI to show the correct download percentage if needed. Unfortunately, there is another bug: at least on Mac OS this number can’t be larger than 2147483647 (2 GB) which is the maximum size of one file in the file system but it’s intended to be the maximum total size of the whole set. I’m going to submit a bug to the Chromium Bug Tracker about this. Meanwhile, if the total set size doesn’t bypass 2GB (like in our case) our calculations are correct.

Now, let’s add some more useful handlers to our service worker and experiment with some non-standard cases to call some errors.

Handling errors

We had a look only at best scenarios so far when everything works as planned which is not always the case when we deal with network connections. Let’s add more handlers to our service worker to be ready to the variety of possible errors. Again, we’ll use the code from Background Fetch API proposal repo as a foundation.

What do we expect:

On any kind of failure — let’s try to save to the cache at least what we already downloaded (and let1s tey to continue with the next asset if any)
If the user aborts the transfer — we do not store what was potentially downloaded
Not related to the errors bu useful handler — if user click on this transfer infobar we just open the new tab with URL we specified in our JSON file with the asset settings

Demo time! Let’s specify the wrong URL for one of the assets in our set: assets/s01e01.avi (not .mpg):

The background fetch ends up by thebackgroundfetchfail event with the registration.failureReason equal to “bad-status”. It’s important that despite the error with a particular asset, we continue our batch with the next asset and have the possibility to cache all our previous successful responses.

My other tries to call different types of errors:

Downloading asset from another origin. It works normally if CORS set up. If not — we end up with backgroundfetchfail event with “fetch-error” as registration.failureReason. You can only specify HTTPS-driven origins (or localhost).
Shutting down the server and waiting until the network timeout— “bad-status”
Shutting server down and starting up again (to mimic the temporarily out-of-service) — doesn’t work well. It resumes the transfer after server goes online but sends backgroundfetchfail with “bad-status” very soon. Also, we have non-consistent quota usage numbers:

Three different values for what has been downloaded

Two more issues in that scenario. First, the downloading of the second file doesn’t even start (despite the server is alive). And second, “Content-Length” shown in Cache explorer confusingly equals to the full file size despite we were able to download this asset only partially:

And value number four…

The above errors give us a chance to cache what could be downloaded successfully. According to the specification proposal, the behavior is different for the errors related to the downloadTotal property. Let’s set it equal to 140015339 — exact size in bytes of our “small” asset (s01e02.mpg). After the transfer start, we receive backgroundfetchfail with “total-download-exceeded”. This is expected — the s01e01.mpg is larger than this limit. What we don’t expect (but it’s correct according to the spec) — is that even s01e02.mpg will not be cached in that case — the transfer operation aborts immediately on “total-download-exceeded” error. We can’t put into the cache even properly sized assets. So if we remove this “incorrect size”-file from the URL array to fetch, s01e02.mpg will land in Cache Storage.

The last handler in our service worker — backgroundfetchclick — is not related to the error handling. This is what happens when the user clicks on this download infobar. In our example, we open a new tab with the URL we provided in the configuration.

The full code of the demo (with downloading images instead of large movie files) is available:

On GitHub
On Glitch

Conclusion

In my opinion, Background Fetch API could be the “next big thing” for the PWA concept. There are plenty of interesting usecases making the web apps as powerful as the native ones in terms of large app assets network manipulations. But there are some risks:

Browser vendors adoption. Yes, we all know that everything in PWA is based on “progressive enhancement” idea and we HAVE TO architect our apps in that way and build our apps actively using feature detection. But I really don’t want to have some APIs specific to this or that vendor.
User protection. Wasteful network traffic consumption, littering storage by abandoned resources, breaking the privacy by exposing the list of downloaded URLs are my main concerns. Downloading and storing large resources should be taken very seriously both by specification authors and developers.

I don’t want to finish this article by the “risks” statement so let me give you an idea of the module/library/package for the automation of background fetches flows. Let’s assume that we want to give the possibility to our users to store locally some set) of the static files (MP3s?) we have on our server.

Using some kind of build helper we generate background fetch manifest (looking like the JSON setting file we used for the demo). It could be the script iterating through the folders.
In our app UI, we can now generate the lists of assets. Like the filename + “Store locally” button.
We agree on some kind of API — like “on click Store locally button we POST the filename to /storage-manager endpoint”. Another endpoint for removal.
Also during this list generation, it makes sense to check the status of this asset in Cache Storage. If it’s there — we have “Remove from device” button instead of “Store”.
In our service worker, based on the background fetch manifest and API we’ve just architected above, we generate the routing for “fetch” event. Now we can register background fetches in our service worker after the request from app.

If you wish to implement it as a standalone helper or as a plugin to Workbox — ping me, I’ll give you more details about this idea.

And let’s start our experiments with Background Fetch API!

About me

I’m deep into PWA topic. And go deeper day-by-day :) I call myself PWAdvocate because I support the developers (as a developer myself) by providing the latest updates on this topic, by introducing and sharing developer-friendly and user-friendly ways to build the apps, by answering the questions. You can see me speaking and training at many conferences (I have 100+ flights each year) — please come to chat with me about PWA, Web Platform, developer communities!

Also, I’m open for the invitations to speak/train at your conference or private corporate meeting/bootcamp/hackaton in 2019— just DM me on Twitter.