## Upcoming Talks

2021-10-20 - [Hybrid backend using Prisma and a Headless CMS](https://www.meetup.com/fedsa-community/) 🇬🇧\
Front-end Development South Africa Meetup (South Africa 🇿🇦)

2021-10-25 - [Incremental Static Regeneration: Static sites on steroids](https://reactadvanced.com/) 🇬🇧\
React Advanced London (England 🏴󠁧󠁢󠁥󠁮󠁧󠁿)

2021-10-28 - [Incremental Static Regeneration: Static sites on steroids](https://www.conf42.com/js2021) 🇬🇧\
Conf42: JavaScript 2021

2021-11-03 - [How to View and React without a Head](https://geekle.us/react) 🇬🇧\
React Global Summit 2021 (USA 🇺🇸)

2021-11-10 - [Crash Course into the Jamstack with Next.js & Storyblok](https://geekle.us/workshopfacundogiuliani) 🇬🇧\
React Global Summit 2021 (USA 🇺🇸)

2021-11-20 - [Incremental Static Regeneration: Static sites on steroids](https://vopen.tech/) 🇬🇧\
vOpen 2021

## Past Talks

2021-10-10 - [Headless CMS, o como alegrar a los desarrolladores y editores al mismo tiempo](https://www.youtube.com/watch?v=ldp-SM_KEAo) ([Slides](https://slides.com/fgiuliani/netcore-headless-cms)) 🇪🇸    
Virtual NetCoreConf 2021 (Spain 🇪🇸)

2021-09-22 - [Jamstack: Deploying blazing fast static sites using Git](https://www.youtube.com/watch?v=moZWRGon9fk\&list=PLe6EXFvnTV78OwMKQNYZ-s7e6yhsV3mTD) ([Slides](https://slides.com/fgiuliani/gitkon-2021/)) 🇬🇧\
GitKon 2021 (USA 🇺🇸)

2021-09-01 - [How to View and React without a Head](https://youtu.be/myzAXCye-Qo?t=274) ([Slides](https://slides.com/storyblok/react-without-head-finland)) 🇬🇧\
React Finland 2021 (Finland 🇫🇮)

2021-08-26 - [Mirando el vaso medio lleno](https://youtu.be/Lh8PDrHb5xo?t=6708) ([Slides](https://docs.google.com/presentation/d/1UpAfb0-rtEcUR4ODp308T0gTp_zWBBCG59RZVe2heZM/edit?usp=sharing)) 🇪🇸\
WebConf LATAM 2021 (Argentina 🇦🇷)

2021-07-26 - [Storyblok: A visual experience](https://youtu.be/Teui9D4tTGs?t=7169) ([Slides](https://speakerdeck.com/fgiuliani/storyblok-a-visual-experience)) 🇬🇧\
Jamstack Porto (Portugal 🇵🇹)

2021-06-02 - [Secure your Next.js + Prisma app with Auth0](https://youtu.be/1bh4HET5-0Y?t=356) ([Slides](https://slides.com/fgiuliani/next-prisma-auth0)) 🇬🇧\
Prisma Meetup (Germany 🇩🇪)

2021-05-21 - [Jamstack, static sites y Azure](https://youtu.be/EpSbSxQDMb8?t=12842) ([Slides](https://speakerdeck.com/fgiuliani/azure-days-conosur-jamstack-sitios-estaticos-y-azure)) 🇪🇸\
Global Azure ConoSur 2021 (Argentina 🇦🇷)

2021-05-21 - [Incremental Static Regeneration: Static sites on steroids](https://youtu.be/JraesXvwhoU?t=16438) ([Slides](https://speakerdeck.com/fgiuliani/incremental-static-regeneration-static-sites-on-steroids)) 🇬🇧\
200OK: Oklahoma’s Web Developer Conference (USA 🇺🇸)

2021-04-26 - [Bringing the Jamstack to Azure with Static Web Apps](https://www.youtube.com/watch?v=lsahHCzDXiQ) ([Slides](https://speakerdeck.com/fgiuliani/introduction-to-azure-static-web-apps-english)) 🇬🇧\
Jamstack Berlin (Germany 🇩🇪)

2021-04-17 - [Jamstack, static sites y Azure](https://youtu.be/PjADCOjMDlM?t=21552) ([Slides](https://speakerdeck.com/fgiuliani/netcoreconf-jamstack-static-sites-y-azure)) 🇪🇸\
Global Azure México 2021 (Mexico 🇲🇽)

2021-02-27 - [Jamstack, static sites y Azure](https://www.youtube.com/watch?v=85IrWVDLqAc) ([Slides](https://speakerdeck.com/fgiuliani/netcoreconf-jamstack-static-sites-y-azure)) 🇪🇸\
NetCoreConf (Spain 🇪🇸)

2021-02-19 - [Jamstack: Going (a little bit) back to the roots](https://emamo.com/event/developerweek-2021/r/speaker/facundo-giuliani-2) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
DeveloperWeek 2021 (USA 🇺🇸)

2021-01-28 - [Jamstack: The Return of the Static Websites](https://gdg.community.dev/events/details/google-gdg-bucharest-presents-chrome-dev-summit-extended-2020/) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
Bucharest Chrome Dev Summit Extended (Romania 🇷🇴)

2020-12-06 - [Jamstack: The Return of the Static Websites](https://gdg-siberia.com/) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
DevFest Siberia 2020 (Russia 🇷🇺)

2020-11-26 - [Jamstack: Volviendo (un poco) a las raíces](https://valdivia.beerjs.cl/) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-volviendo-a-las-raices)) 🇪🇸\
BeerJS Valdivia (Chile 🇨🇱)

2020-11-26 - [Jamstack: El retorno de los sitios estáticos](https://youtu.be/3Aa51mIxt1k) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-el-retorno-de-los-sitios-estaticos)) 🇪🇸\
ArqConf Summit Latam 2020 (Argentina 🇦🇷)

2020-11-24 - [Jamstack, static sites, and Azure](https://www.youtube.com/watch?v=o5EHiH2Knyk) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-static-sites-and-azure)) 🇬🇧\
Azure Community Conference (India 🇮🇳)

2020-11-19 - [Jamstack: Volviendo (un poco) a las raíces](https://youtu.be/yrBDlZsDBFA?t=4800) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-volviendo-a-las-raices)) 🇪🇸\
BeerJS Córdoba (Argentina 🇦🇷)

2020-11-17 - [Jamstack: Going (a little bit) back to the roots](https://emamo.com/event/developerweek-austin-2020/r/speaker/facundo-giuliani-1) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
DeveloperWeek Austin 2020 (USA 🇺🇸)

2020-10-22 - [Jamstack: Going back to the roots](https://www.youtube.com/watch?v=GlgAm8CfDFc) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
Big Mountain Data and Dev Conference 2020 (USA 🇺🇸)

2020-10-17 - [Jamstack: Going back to the roots](https://youtu.be/x325JPp1aSo?t=18125) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
DevFest Poland 2020 (Poland 🇵🇱)

2020-10-17 - [Jamstack: Going back to the roots](https://gdg.community.dev/events/details/google-gdg-bujumbura-presents-gdg-bujumbura-devfest-2020) ([Slides](https://speakerdeck.com/fgiuliani/jamstack-going-back-to-the-roots)) 🇬🇧\
DevFest Bujumbura 2020 (Burundi 🇧🇮)

2020-09-07 - [Introducción a Azure Static Web Apps](https://youtu.be/4o-arkj8kgc?t=321) ([Slides](https://speakerdeck.com/fgiuliani/introduccion-a-azure-static-web-apps-espanol)) 🇪🇸\
Jamstack Medellín (Colombia 🇨🇴)

2020-07-27 - [Introduction to Azure Static Web Apps](https://youtu.be/8VczqlbVF1k?t=2094) ([Slides](https://speakerdeck.com/fgiuliani/introduction-to-azure-static-web-apps-english)) 🇬🇧\
Jamstack Porto (Portugal 🇵🇹)

2020-07-18 - [Introducción a Azure Static Web Apps](https://www.youtube.com/watch?v=-SfPzYL9Xlw) ([Slides](https://speakerdeck.com/fgiuliani/introduccion-a-azure-static-web-apps-espanol)) 🇪🇸\
Jamstack Mexico City (Mexico 🇲🇽)


Talks

2021-08-20 [StepZen Stream "How to mix data from Storyblok CMS with your own project using StepZen"](https://www.youtube.com/watch?v=gDxYEUIzRMQ) 🇬🇧

2021-05-21 - [ConoSur "Azure Days 2021" Interview](https://www.youtube.com/watch?v=nlOz6Q1R350) 🇪🇸

2021-01-11 - ["Camino Dev" Podcast episode](https://anchor.fm/caminodev/episodes/29-Facundo-Giuliani-eorfls) 🇪🇸

2020-12-01 - ["UsoEsto" interview](https://usoesto.com/entrevistas/fgiulani/) 🇪🇸

2020-11-23 - ["Café con Tech" Podcast episode](https://www.cafecon.tech/1081172/6506308-el-no-ya-lo-tienes-junto-a-facundo-giuliani) 🇪🇸


Collaborations

Article published on MediaJams website:

https://mediajams.dev/post/automate-social-images-next-puppeteer

https://images.ctfassets.net/mvkmiycntf3t/1cRVyPqX3vb9Rd5u6jREdu/4796676190c527e8e4274902e75307ce/image__1_.jpeg

In this article, we will see how to create a web app that generates social images automatically. The service will generate HTML content dynamically, based on a request, generate a "snapshot" of the content, and return it to the requester. In order to do this, we will need to automate the usage of a web browser.

Automate Social Images with Next.js and Puppeteer

Article published on MediaJams website:

https://mediajams.dev/post/upload-and-display-images-using-prisma

https://images.ctfassets.net/mvkmiycntf3t/1AC6bgj1QCBIep9uzoabnE/76b8b683b9d8cf432968e7c64fe152ea/image.jpeg

Sometimes you need to handle and manage images linked to information that is stored in the database of your web application. We can improve and simplify both image management, and data storage, using two helpful products: Prisma and Cloudinary.

Upload and display images using Prisma

Article published on Smashing Magazine website:

https://www.smashingmagazine.com/2021/07/migrate-jquery-nextjs/

https://images.ctfassets.net/mvkmiycntf3t/2Ew91EMs7U4OXwVQCOWs7N/71c1fb1a85382be0ce2a42f6bf0754c2/photo-1580311907323-df0f274f7828.jpeg

In this article, we’re taking a closer look at different approaches and strategies on how we can migrate a web application that uses jQuery framework, and start using one of the coolest React frameworks in the market: Next.js.

How To Migrate From jQuery To Next.js

Article published on Storyblok's blog:

https://www.storyblok.com/tp/add-a-headless-cms-to-asp-net-in-5-minutes

https://images.ctfassets.net/mvkmiycntf3t/6sXBMmHF3VQ3cOMq2XVi4c/8bb184725f8dfa47d980d58ca55a1dfd/1626958669008.jpeg

In this tutorial we will see how to integrate the Storyblok API with an ASP.NET Core MVC application and enable a preview of the content in the real-time Visual Editor. We will use Adliance.Storyblok, a C# client for the Storyblok API, to manage our data.

Add a headless CMS to ASP.NET in 5 minutes

Article published on Strapi's blog:

https://strapi.io/blog/how-to-build-a-crud-app-with-react-and-a-headless-cms

https://images.ctfassets.net/mvkmiycntf3t/19nkwkqEyVGeMIip1XVJGT/2d7ed5bcbd9a65355ee55bee750ac68f/Snipcart_Strapi_7_5b10bec6d6.png

Learn how to create a Pet Adoption CRUD application using Strapi headless CMS for the backend, and React with Redux for the frontend.

How to Build a CRUD App with React and a Headless CMS

I'm a Systems Engineer from Buenos Aires, Argentina.

At the age of 8, I got my first personal computer, a gift from my father: An old 386 PC. I started playing around with MS-DOS, Windows 3.11, and really old games. The first time I formatted my computer and re-installed all the apps, I felt like a hacker.

Later, in high school, I studied informatics and graduated as an informatics technician. That was my first approach to software development. I started learning how to code, using Visual Basic 6. I put this knowledge into practice when I got together with some friends to create games and apps. In our senior year, we developed an accounting system that was used by a small factory in our neighborhood.

I started studying at university when I was 18. That was when I got my first real job: Software Developer in a consulting company. I started working with Visual Basic 6 and MS-SQL Server. A couple of years later I learned C# and started using .NET Framework.

After that, I worked for several clients and companies: Exchange offices, electricity distributors, insurance companies, assistance companies, financial investments firms, etc. I learned a lot, I worked a lot and I improved a lot as a professional.

In December 2011 I graduated from the National Technological University of Argentina (Universidad Tecnológica Nacional) as a Systems Engineer. I haven't stopped there and I continue challenging myself and learning every day so I can become a better professional.

After going through several jobs and experiences, I am now a remote Developer Relations Engineer at Storyblok. Working here makes me face new challenges, which help me grow as a professional and as a person.

I'm an optimistic, enthusiastic, and hard-working person waiting to see what the future holds for my career.


About Me

Article published on Sanity.io website:

https://www.sanity.io/guides/graphql-vs-rest-api-comparison

https://images.ctfassets.net/mvkmiycntf3t/6rpFt6bJu4HPCpII2unpCl/51d0788b59cd0007c48fec6790f4c9c6/3058082eb7077e1ee27a85c1e033facea075d3a8-2400x1800.jpg

Are you planning to build an API for your web application and you don't know what architectural approach to take? In this article, we will describe REST and GraphQL APIs. We will see their features, advantages, disadvantages, and use cases.

GraphQL vs REST: which API is better for your web app?

Article published on Auth0 website:

https://auth0.com/blog/e2e-testing-with-playwright-sharp

https://images.ctfassets.net/mvkmiycntf3t/3aqgbrbAEVLypcZ1V83AwH/f3f19ac0fd495b2858a50244279b9427/playwright-sharp.png

Automating web browser interactions is a great way to test the functionalities of our web application. Let's see how to create UI tests in C# using Playwright Sharp, a browser automation library.

End-To-End Testing With Playwright Sharp

Article published on Auth0 website:

https://auth0.com/blog/pdf-generation-with-puppeteer-sharp

https://images.ctfassets.net/mvkmiycntf3t/7krszP4UnKZ5zN78kht8H1/bf65093c8d94b290c45f78a57efa15bc/PuppeteerSharp.png

Besides surfing the web, you can use web browsers programmatically to automate tasks. Learn how to drive a Chromium browser using Puppeteer Sharp, a browser automation library for C#.

PDF Generation with Puppeteer Sharp

Article published on Smashing Magazine website:

https://www.smashingmagazine.com/2021/05/implement-authentication-nextjs-auth0

https://images.ctfassets.net/mvkmiycntf3t/2WfV1DWWPzcjJGVWLAFrQy/8b36fdc2680419ab097c6990639df5b5/photo-1528312635006-8ea0bc49ec63.jpeg

At the moment of adding authentication and authorization to our web applications, there are some things that we should evaluate, e.g. whether we need to create our own security platform or whether we can rely on an existing third-party service. Let’s see how we can implement authentication and authorization in Next.js apps, with Auth0.

How To Implement Authentication In Next.js With Auth0

Blog

Do you use Jira as the issue tracker in your company? Do you link GitHub PRs with Jira issues, and you want to ensure that link exists in every created PR of your repository? This GitHub Action is for you!

### Workflow

Defining a Jira "prefix" issue, `Jira Issue Key Checker` will verify every PR created in your repository contains a linked Jira issue key in both the PR title and description. You can see how to configure and trigger the action here:
https://github.com/fgiuliani/jira-issue-key-checker/blob/master/README.md

To see the complete code of the project, you can go here:
https://github.com/fgiuliani/jira-issue-key-checker

### Init project and install packages

As we'll use Node.js to create this GitHub Action, we will run `npm init` in our directory to generate `package.json` file. In this file we will set the details of our project. We will also install some dependencies that will help us to integrate our code with GitHub.

`npm install @actions/core`
`npm install @actions/github`

The `@actions/core` package provides an interface to the workflow commands, input and output variables, exit statuses, and debug messages.

The `@actions/github` package grants access to GitHub Actions contexts.

### Create an action metadata file

Create a file called `action.yml`. It defines action's inputs and details. It also tells the action runner how to start running this JavaScript action. Write the following example code in the file:

```
name: "Jira Issue Key Checker"
description: "Checks If a PR contains its linked Jira issue key in both the title and the description."
on: [pull_request]
inputs:
  GITHUB_TOKEN:
    required: true
  jira-prefix:
    required: true
    description: "Jira issue key prefix. Ex. ABC-1111, prefix would be ABC"
runs:
  using: "node12"
  main: "index.js"
```

### Write the action code

Let's create `index.js` file, which will containg the action code.

```
const core = require("@actions/core");
const github = require("@actions/github");

const jiraPrefix = core.getInput("jira-prefix");

async function run() {
  try {
    const prTitle = github.context.payload.pull_request.title;
    const prBody = github.context.payload.pull_request.body;

    let regex = new RegExp(`${jiraPrefix}-[0-9]+`);
    if (!regex.test(prTitle) || !regex.test(prBody)) {
      core.setFailed("Jira Issue Key missing in PR title or description.");
      return;
    }
  } catch (error) {
    core.info(error);
  }
}

run();
```

Some aspects to consider about the code:
- GitHub Actions provide context information about the webhook event, workflow, action, etc. To access the context information, you can use the `github` package.
- `core.getInput("jira-prefix")` will get the prefix we defined for the issues we want to check.
- `github.context.payload.pull_request` exposes information related to the PR we're evaluating with the action.
- `core.setFailed` marks the PR as failed If it doesn't pass the evaluation of the Regular Expression that validates both PR title and description contain the linked Jira issue key.

### Commit, tag, and push the action to GitHub

Commit all the files inside the directory of your project. You will also need to commit `node_modules` folder.

```
git add .
git commit -m "My GitHub Action"
```

It's a good practice to also add a version tag for releases of your action. Let's create a version and push the changes to the repository.

```
git tag -a -m "My GitHub Action" v1
git push --follow-tags
```

### Test and use the action

Take any GitHub repository and create the file `.github/workflows/jira-issue-key-checker.yml`. In the file, paste this example code:

```
name: "Jira Issue Key Checker"
on:
  pull_request:
    types:
      - opened
      - edited
      - synchronize

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: [your-user]/[your-action-repository]@v1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          jira-prefix: "ABC"
```

Add this file to your GitHub repository. After this, whenever a new PR is created in that repository, the GitHub Action will run and evaluate it. You will be able to see the workflow execution and details about that clicking on the **Actions** tab.

https://images.ctfassets.net/mvkmiycntf3t/luIOM3L7MKpP7qpbnKSyu/db1fc56c9298efd4848fb653f5150e54/jira-github.jpg

Check the inclusion of Jira Issue Keys in PRs with GitHub Actions

https://images.ctfassets.net/mvkmiycntf3t/6qlqi9TZtaLGTEdXcC75BZ/74df2b29191df31b8b795145ab127eb1/stefan-bookblock-wdf0FsoPAGc-unsplash.jpg

Public bookmark list and URL shortener with Fauna, Next.js and Auth0

---

This article is part of [#ServerlessSeptember](https://aka.ms/ServerlessSeptember2020). You'll find other helpful articles, detailed tutorials, and videos in this all-things-Serverless content collection. New articles from community members and cloud advocates are published every week from Monday to Thursday through September. 

Find out more about how Microsoft Azure enables your Serverless functions at [https://docs.microsoft.com/azure/azure-functions/](https://docs.microsoft.com/azure/azure-functions/?WT.mc_id=servsept20-devto-cxaall). 

---

If our organization has a YouTube channel with videos, users may comment on them with questions or doubts. If only one person checks the channel, regular notifications may be enough. But what would happen If we want to notify other people whenever a user posts a comment in one of our videos?

In this article, we'll use [Azure Functions](https://azure.microsoft.com/en-us/services/functions/) and a couple of third-party APIs to create a JavaScript serverless application to send emails when new comments are added in any video from a YouTube channel. We will call the [YouTube API](https://developers.google.com/youtube/v3/docs) from the app, using a [Google Developer Project](https://console.developers.google.com) to get an API Key. 
As we don't have anything like push notifications to get new comments automatically, we will create a serverless application to do that. It will run on a schedule (seconds, minutes, or hours), and it will verify If we have new comments in any of the videos of a specific channel. To do that we will call the YouTube API. If we get new comments, this app will send a notification email to a list of people using [SendGrid API](https://sendgrid.com/).

If you want to see the final source code, you can check out the repository on [GitHub](https://github.com/fgiuliani/youtube-notifier)

We will use [Node's package manager](https://nodejs.org/) to install the dependencies we need for this demo.

### Create Google Developer Project to get a YouTube API Key

- Go to https://developers.google.com/ and log in with your Google Account (or create an account, if necessary). 
- Go to https://console.developers.google.com/project and click on **Create Project**. Put the details you prefer for the project.

![](https://photos.collectednotes.com/photos/59/25ee142a-8c8a-4876-ac9b-eb629bbd4f1e)

- Go to the project you just created and click on **Enable APIs and Services** and look for **YouTube Data API v3**. Select it and click on **Enable**.

![](https://photos.collectednotes.com/photos/59/d197abd8-b2cd-4d9d-98d3-411bac79918a)

- Go to **Credentials** and click on **Create Credentials** -> **API Key**. Save the generated key. We will need it in our Azure Functions app.

![](https://photos.collectednotes.com/photos/59/51f8dd94-f615-4d31-8428-ebb141ab3f58)

### Create SendGrid account to get an API Key

[SendGrid](https://sendgrid.com/) is a powerful tool used to send emails, but it can also track user interaction. You can create marketing campaigns, generate reports, and see different types of statistics.

- [Sign Up on SendGrid](https://signup.sendgrid.com/). You don't need a credit card to create an account. The free tier will be enough to go through this tutorial.
- Go to https://app.sendgrid.com/settings/api_keys and click on **Create API Key**. Set a name for it and give it Full Access.
- Click on **Create and View**. Copy the generated key somewhere safe since it won't be displayed again.

![](https://photos.collectednotes.com/photos/59/1225073c-af82-4604-b4f0-e7ab4a21ef2a)

After that, you will need to [Verify a Single Sender](https://app.sendgrid.com/settings/sender_auth/senders). We need to add some information to clarify which email account we will use later in the app to be the sender of our notifications, and some details related to that account.

![](https://photos.collectednotes.com/photos/59/d5eaed0f-e62e-43e6-8931-790c6551a3f4)

### Create an Azure Account

[Microsoft Azure](https://azure.microsoft.com/) is a cloud computing service for building, testing, deploying, and managing applications. It offers different products to help us with our applications. For our project, we will use [Azure Functions](https://azure.microsoft.com/en-us/services/functions/), the serverless application service from Azure. Different languages are supported to create these Functions. We will use JavaScript.

- [Sign Up on Microsoft Azure](https://azure.microsoft.com/en-us/free/). There is a free tier for many of the services offered, and a trial period for other features. You won't need to pay anything for this demo.
- After setting up your account, let's create an [Azure Storage account](https://docs.microsoft.com/en-us/azure/storage/common/storage-account-create). This will be the space you will use to host the Function.

![](https://photos.collectednotes.com/photos/59/05ab4c6e-bf6d-4c77-890b-946dfdb3014e)

- Select your storage account, select **Access keys** in Settings, then copy the first Connection string. We will need it later.

![alt](https://photos.collectednotes.com/photos/59/6d86fcca-7606-4eb1-9142-f1d34b0a2e03)

### Install Azure Functions Extensions

The IDE I use is [Visual Studio Code](https://code.visualstudio.com/). It's a powerful editor with many plugins and customizations. I recommend using it for this demo because there's an [Azure Functions Extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions), which will make our job easier and will help us create and deploy the Function.

![](https://photos.collectednotes.com/photos/59/e8427ae8-f63a-429d-92cd-fe76919805dc)

After installing the extension, in the left menu, you should have an Azure icon. Click on it and sign in with your Azure Account, so the IDE links your personal account.

![](https://photos.collectednotes.com/photos/59/3154f39a-9f44-43f4-a33d-678f06735682)

Finally, to enable local debugging, we need to install the [Azure Functions Core Tools](https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=macos%2Ccsharp%2Cbash#v2).

Now it's time to code!

### Create a new Azure Function Project

In Visual Studio Code, in the same menu, you signed in, now you should see your Azure Subscription. Click on the icon with a folder and a thunder that says **Create New Project** and follow the steps:

- Name your project.
- The language we'll use is JavaScript.
- You should select the template **Timer Trigger**. 
- I want my Function to run every 5 hours, so I set the time interval cron as **"0 0 */5 * * *"**. You can read more about the cron format [here](https://docs.microsoft.com/en-us/azure/azure-functions/functions-bindings-timer?tabs=javascript). You will be able to change this later in the **function.json** file.

After following these steps, we should have all the initial files of our Azure Function Project generated.

### Install NPM packages

To call the YouTube API, we will use [Google APIs Node.js Client](https://www.npmjs.com/package/googleapis). We need to run `npm install --save googleapis` in the terminal to install the package so our Azure Function can use it.

For the SendGrid API, we also have an NPM package that we will use to send the emails. Run `npm install --save @sendgrid/mail` to install [Mail Service for the [SendGrid v3 Web API](https://www.npmjs.com/package/@sendgrid/mail).

### Define Environment variables

We will need some key values to be stored as environment variables. Go to `local.settings.json` file and add these keys inside "Values":

```javascript
"YouTubeAPIKey": "[YOUTUBE_API_KEY]", // The API Key generated in your Google Developer Project.
"YouTubeChannelID": "[YOUTUBE_CHANNEL_ID]", // The ID of the YouTube channel you want to watch.
"SendGridAPIKey": "[SENDGRID_API_KEY]", // SendGrid API Key.
"EmailFrom": "[SENDER_EMAIL]", // The sender email for the notifications.
"EmailTo": "[RECEIVER_EMAIL]" // The receiver email for the notifications.
```

The channel ID is the identifier of the YouTube channel you want to keep track of. If you see, the URL of a channel looks like `https://www.youtube.com/channel/[ChannelID]`.

`"EmailTo"` could contain more than one email address. You have to separate them with commas, ','.

Also, you will need to set the connection with your Azure Storage account. To do this, paste the connection string you previously generated as the value of the key `AzureWebJobsStorage`.

### The Function

Let's go now to the `index.js` file inside the project directory. We will start coding our app.
First, we will initialize the YouTube and SendGrid API clients. We will use the NPM packages we installed in the previous section, and the environment variables we defined. This is how the code inside our function should look like:

```javascript
  const { google } = require("googleapis");
  const sendGridClient = require("@sendgrid/mail");

  const youtubeClient = google.youtube({
    version: "v3",
    auth: process.env["YouTubeAPIKey"],
  });

  sendGridClient.setApiKey(process.env["SendGridAPIKey"]);
```

After that, we will call the YouTube API to get a list of the last comments (and replies) posted in all the videos of a specific channel.

```javascript
  const response = await youtubeClient.commentThreads.list({
    part: "snippet,replies",
    allThreadsRelatedToChannelId: process.env["YouTubeChannelID"],
    maxResults: 100,
    order: "time",
  });
```

A few things to consider here:

- We call [**commentThreads**](https://developers.google.com/youtube/v3/docs/commentThreads/list) endpoint because we want to retrieve all the comments and their replies.
- We use the environment variables we set before with the channel ID.
- The API supports a maximum of 100 results. That's the number of results we will bring not to lose any comment.
- `order: "time"` sets the order of the results from the newest to the oldest.

You can read the YouTube API documentation to see the details of the results we get from the YouTube API. It will be helpful for the following part of the code.

```javascript
  if (response.data) {
    const lastRun = new Date(myTimer.scheduleStatus.last);

    response.data.items.forEach(function (comment) {
      const topLevelComment = comment.snippet.topLevelComment.snippet;
      const topLevelCommentDate = new Date(topLevelComment.publishedAt);

      if (topLevelCommentDate.getTime() > lastRun.getTime()) {
        sendEmail(
          topLevelComment.authorDisplayName,
          topLevelComment.textDisplay,
          `https://www.youtube.com/watch?v=${topLevelComment.videoId}&lc=${comment.id}`
        );
      }

      if (comment.snippet.totalReplyCount > 0) {
        comment.replies.comments.forEach(function (reply) {
          const replyDate = new Date(reply.snippet.publishedAt);

          if (replyDate.getTime() > lastRun.getTime()) {
            sendEmail(
              reply.snippet.authorDisplayName,
              reply.snippet.textDisplay,
              `https://www.youtube.com/watch?v=${reply.snippet.videoId}&lc=${reply.id}`
            );
          }
        });
      }
    });
  }
```

Let's break this down:

```javascript
  if (response.data) {
```

We'll keep executing the function only If we get any result.

```javascript
    const lastRun = new Date(myTimer.scheduleStatus.last);
```

Azure Functions exposes a [timer object](https://docs.microsoft.com/en-us/azure/azure-functions/functions-bindings-timer?tabs=javascript#usage), which contains the data related to the execution of the timerTrigger function. We can use it to get the last execution time to compare it with the comments date/time. If the comment is newer, we assume we didn't notify the users about it, so we send the email. We have to make that comparison with every comment we get from the API.

```javascript
    response.data.items.forEach(function (comment) {
      const topLevelComment = comment.snippet.topLevelComment.snippet;
      const topLevelCommentDate = new Date(topLevelComment.publishedAt);

      if (topLevelCommentDate.getTime() > lastRun.getTime()) {
        sendEmail(
          topLevelComment.authorDisplayName,
          topLevelComment.textDisplay,
          `https://www.youtube.com/watch?v=${topLevelComment.videoId}&lc=${comment.id}`
        );
      }
```
But also with the comments' replies (If they have any)

```javascript
      if (comment.snippet.totalReplyCount > 0) {
        comment.replies.comments.forEach(function (reply) {
          const replyDate = new Date(reply.snippet.publishedAt);

          if (replyDate.getTime() > lastRun.getTime()) {
            sendEmail(
              reply.snippet.authorDisplayName,
              reply.snippet.textDisplay,
              `https://www.youtube.com/watch?v=${reply.snippet.videoId}&lc=${reply.id}`
            );
          }
        });
      }
```

You should have noticed we're calling twice a function called `sendEmail`, sending as parameters the comment's user, text, and the direct URL. Let's create that function, which will call the SendGrid API to send the emails. Write the code for the function inside the main function.

```javascript
  function sendEmail(user, comment, url) {
    let body = "There is a new comment in one of your videos\n";
    body += `User: ${user}\n`;
    body += `Comment: ${comment}\n`;
    body += `Url: ${url}`;

    const msg = {
      to: process.env["EmailTo"],
      from: process.env["EmailFrom"],
      subject: "There is a new comment in your YouTube Channel",
      text: body,
    };

    sendGridClient
      .send(msg)
      .then(() => {
        console.log("Email sent");
      })
      .catch((error) => {
        console.log(error.response.body);
      });
  }
```

As we said, `sendEmail` receives the user, the comment, and the URL. Then, it creates the email body, and instantiates a `msg` with all the email details. After that, it calls the SendGrid API with the client we initialized, and we send the email to the users.

That would be all the code for the Azure Function. You can execute it locally and debug it directly from Visual Studio Code, using its integrated debugger (press F5 to debug). Consider that we created a timerTrigger, and it will follow the time interval we defined even when debugging locally. So, If you want to debug in a better way, maybe you should define a smaller time interval to execute the function more frequently.

### Deploy the function to Azure

With the Azure Functions Extension, deploying from Visual Studio Code is very simple.
- Click on the Azure logo to open the Azure Explorer. Under **Functions**, click on the blue up arrow.

![](https://photos.collectednotes.com/photos/59/3154f39a-9f44-43f4-a33d-678f06735682)

- At the prompt, select **Create new Function app in Azure**.
- Enter a globally unique name for your Function.
- Choose the Node.js version/runtime.
- Select the Azure region of your preference.

After following these steps, and waiting for a while, your Function will be up and running in Azure.

### Final words

In this demo, we learned how to create, debug, and deploy an Azure Function (time-triggered) using JavaScript and Visual Studio Code. We developed some basic integrations with YouTube and SendGrid APIs. 

A next step would be analyzing the resources consumed by the function and evaluating [the costs it would incur](https://azure.microsoft.com/pricing/details/functions/) while working in Azure. If you don't want to keep the Function, you can clean up the resources. Right-click the Function App in the **Azure: Functions** explorer and select **Delete Function App**.

https://images.ctfassets.net/mvkmiycntf3t/jeT8z4Qb7FAol6nB5OrkO/609bacd32f618515282f3fef38a04188/christian-wiediger-usWE9pOuTfE-unsplash.jpg

Notify YouTube comments with Azure Functions


Thank you for contacting me! I will get back in touch with you soon.

**Have a great day!**

Thank You!

Systems Engineer from Buenos Aires, Argentina.    
Full Stack Developer.    
Developer Relations Engineer at [Storyblok](https://www.storyblok.com/).        


Auth0 Ambassador.\
Prisma Ambassador.\
Cloudinary Media Developer Expert.\
GitKraken Ambassador.


Hi, I'm Facundo!

Home

To get in touch please fill the form below.

name

email

message

Contact

**This is a paragraph**. Pellentesque habitant morbi *tristique senectus et netus et malesuada* fames ac turpis egestas. Vestibulum [tortor quam](https://www.google.com), feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit <mark>amet est et sapien ullamcorper</mark> pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

# This is an H1

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, this is marked text ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.

## This is an H2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

### This is an H3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

#### This is an H4

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

## Quoting

>Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep. <cite>Scott Adams</cite>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

<hr />

## Unordered Lists

+ Donec non tortor in arcu mollis feugiat
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+ Donec id eros eget quam aliquam gravida
+ Vivamus convallis urna id felis
+ Nulla porta tempus sapien

## Ordered Lists

1. Donec non tortor in arcu mollis feugiat
2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
3. Donec id eros eget quam aliquam gravida
4. Vivamus convallis urna id felis
5. Nulla porta tempus sapien

## Code Blocks

Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces.

```

body {
  color: #333;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
```

## Tables

<div class="responsive-table">
  <table>
    <caption>Simple table with caption and header</caption>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
      </tr>
    </tbody>
  </table>
</div>

The style guide provides you with a blueprint of default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.