Posts

Showing posts from November, 2020

How to Create JSON Web Token (JWT) with Google Apps Script

Image
You can use Google Script to create JSON Web Tokens (JWT) that can be provided to secure routes so that only authenticated requests that contain a valid token can connect to the APIs (e.g., the Zoom API ). All JSON Web Tokens have three parts: The header that specifies the hash algorithm that is used for signing and decrypting the JWT. The payload in JSON format that contains all the user data. The iat and exp properties represent the issue date and the expiration time respectively but you can pass any data to the payload. The signature data that allows APIs to establish the authenticity of the access token. The parts are joined with a dot (period) and data is encoded in Base64 using the Utilities.base64EncodeWebSafe method of Apps Script. Create JSON Web Token const createJwt = ( { privateKey , expiresInHours , data = { } } ) => { // Sign token using HMAC with SHA-256 algorithm const header = { alg : 'HS256' , typ : 'JWT'...

Lite YouTube Embeds - A Better Method for Embedding YouTube Videos on your Website

Image
It is easy to embed a YouTube video but you’ll be surprised to know how much extra weight a single YouTube video embed can add to your web pages. The browser has to download ~800 kB of data (see screenshot) for rendering the YouTube video player alone. And these files are downloaded even before the visitor has clicked the play button. The embedded YouTube video not only increases the byte size of your web pages but the browser has to make multiple HTTP requests to render the video player. This increases the overall loading time of your page thus affecting the page speed and the core vitals score of your website. The other drawback with the default YouTube embed code is that it renders a video player of fixed dimensions and isn’t responsive . If people view your website on a mobile phone, the video player may not resize properly for the small screen. Embed YouTube Videos without Increasing Page Size The now defunct Google+ employed a very clever technique for embedding YouTube...

JavaScript Objects Quick Reference

Any object in JavaScript is a collection of key-value pairs. The key, also known as a property, is a unique string that maps to a value which may be a Boolean, String or another object. Let’s take a simple person object that contains properties like name, age and the employment status. const person = { name : 'John' , age : 21 , gender : 'Male' , employed : false , } ; Check if a property (or key) exists in an object console . log ( 'country' in person ) ; // returns false console . log ( 'employed' in person ) ; // returns true console . log ( person . hasOwnProperty ( 'gender' ) ) ; Iterate over an object and print the key-value pairs Object . keys ( person ) . forEach ( ( key ) => { console . log ( ` ${ key } : ${ person [ key ] } ` ) ; } ) ; Object . entries ( person ) . forEach ( ( [ key , value ] ) => { console . log ( ` ${ key } : ${ value } ` ) ; } ) ; Prevent new properties f...

Generate firebase.json file for Firebase Redirects

We recently moved the user guide for Mail Merge and Form Notifications from the website labnol.org to digitalinspiration.com . As with any domain move, we had to manually setup 301 redirects so that the audience are automatically redirected to the new website should they happen to click any of the links that still point to the old domain. Because the websites are hosted on Firebase, it is easy to setup 301 redirects through the firebase.json file. All we need are entries in the redirects array, one entry per redirect, specifying the source, the destination URL and it is also possible to define if the redirect is 301 (permanent) or a temporary 302 redirect. { "redirects" : [ { "source" : "/page1" , "destination" : "https://digitalinspiration.com/page1" , "type" : 301 } , { "source" : "/page2{,/**}" , // also redirect pages ending with slash ...

How to Play YouTube Videos at Custom Speed

Image
The settings pane in the YouTube video player lets you quickly change the default playback speed of the current video. You may go as high as 2x that will play the video at twice the normal speed. The lower limit is 0.25 that will slow down the video to one-fourth the original speed. Watch YouTube at Custom Speed YouTube allows you to play videos at 2x the original speed but what if you want to speed up and watch videos at an even higher speed - like 4x or 10x the normal speed? That’s where Chrome Developer Tools can help. Open any YouTube video inside Google Chrome and launch the JavaScript console from the Chrome menu bar. Go to the View menu, choose Developer, and select JavaScript console from the sub-menu. Inside the console window, type the following command and it will instantly change the playback speed of the current video to 8x the normal speed. $ ( 'video' ) . playbackRate = 8 ; If you want to slow down a video, try a value lower than 1 as: $ ( '...

Build a COVID-19 Self Assessment Tool with Google Forms

Image
Businesses and schools worldwide are using Google Forms to build COVID-19 self-declaration forms that employees, students and visitors must complete every day before they can attend work. Here is a sample COVID-19 Health Screening Form - if the answer is “yes” to any of the questions, the person is expected to stay home. After a respondent submits the form, a confirmation email is sent to them instantly with the Email Notifications add-on. The email is like a clearance certificate detailing whether the person can attend work or not. If they are allowed entry, the email also contains a dynamic QR Code that can be scanned and verified at the entry point. Send Conditional Notification Emails The conditional notifications feature of the Google Forms add-on automatically determines if the respondent should be sent the “Allowed to enter premises” email or not. It looks at the form’s answers and compares them with the specified criteria to make this choice. For instance, if the e...