Forem: Joshua Abel Alhassan

Stress Management and Developer Health

Joshua Abel Alhassan — Thu, 17 Oct 2024 10:25:25 +0000

This article is an excerpt from the Contejas Code Podcast, with Tejas Kumar featuring Michelle Bakels, Program Director at G2i, “How to Optimize Developer Health, Burnout Recovery, and Performance.”

This hiring community (G2i) connects vetted developers with companies needing talent. The discussion in this episode centers around the importance of developer health, addressing burnout, recovery strategies, and optimizing performance through effective health protocols.

G2i helps developers and companies by ensuring a thorough vetting process and matching skilled developers with suitable job opportunities. Michelle Bakels, who also leads the Developer Health Initiative at G2i, organizes the annual React Miami conference and is passionate about improving developer well-being.

A key focus of the episode is G2i’s Developer Health Operating System (OS), a framework designed to optimize developer health outcomes. This system guides individuals, teams, and organizations, helping them track and improve health outcomes with a structured workbook. The Developer Health OS is the product of collaboration with industry experts and healthcare professionals, with G2i investing significant resources to make it a practical tool for the industry.

The conversation touches on critical aspects of developer health, such as recognizing burnout, recovery techniques, preventing burnout, and enhancing performance through strong health protocols. It is especially relevant for individuals who have experienced burnout or work in high-pressure environments and team leaders responsible for ensuring the well-being of their developers.

To watch the full episode on YouTube, click here

Introduction

In this excerpt of the podcast, Tejas Kumar (Host) and Michelle Bakels (guest) talked about understanding stress, emotional health, the story power of naps, the wholistic view of Mental, Physical, and Emotional Health, and developer Health OS

Understanding Stress: Is It All Bad?

Stress is commonly painted as a negative force that leads to burnout, health issues, and decreased performance. However, research shows that how individuals perceive stress can drastically change how it impacts them.

The Mindset Shift Experiment

An experiment was conducted with two groups:

Group A was told that stress is harmful, with risks like heart disease and early death.
Group B was told that stress could be beneficial, citing examples of stress fueling extraordinary human accomplishments.

The results? Group B, who believed that stress could be enhanced, performed better under pressure than Group A. This suggests that mindset plays a critical role in how we experience stress.

Note: Not all stress is inherently bad. By shifting the narrative around stress, developers can leverage it to increase their performance rather than being limited by its negative aspects. For those from challenging backgrounds, stress can be the driving force behind their success. But a key point is to check whether the stress you're experiencing is worth the potential emotional and physical costs.

Emotional Health: The Overlooked Component

In the tech industry, discussions around well-being often focus on physical health (e.g., ergonomic workspaces) and mental health (e.g., reducing cognitive overload). Emotional health, however, frequently takes a back seat, despite being just as important.

Emotional Health and Its Impact

Emotional health affects managing stress, interacting with colleagues, and approaching problem-solving. Emotions trigger chemical changes in the body, influencing hormones and stress levels. Ignoring emotional health can lead to burnout, decreased productivity, and strained work relationships.

The Workplace Perception of Emotional Health

Traditionally, emotional health has been seen as a "soft" topic, less professional, or less important than physical and mental health. Yet, emotions are a core part of the human experience and directly influence work performance.

The Story of Power Naps

Language and branding have a significant impact on how health-related practices are perceived. Take, for example, the concept of "power naps."

The Origin of Power Naps

Initially, short naps during work hours were introduced under the term "prophylactic napping," a medical term emphasizing the cognitive and physical benefits. However, pilots and other professionals rejected the concept, finding the term unappealing.

It wasn’t until the term was rebranded as a "power nap" that the practice gained widespread acceptance. The new name suggested strength, energy, and productivity — much more appealing to a professional audience.

The Holistic View: Mental, Physical, and Emotional Health

For developers, the give-and-take between mental, physical, and emotional health is critical to maintaining high performance over time. Neglecting any one of these areas can lead to imbalances that affect productivity, creativity, and overall well-being.

The Interconnection of Health Domains

Mental Health: Focuses on cognitive load, problem-solving, and dealing with complex issues.
Physical Health: Concerns about ergonomics, exercise, and minimizing physical strain from long hours at the desk.
Emotional Health: This deals with how developers process stress, handle interpersonal relationships, and navigate their feelings about work.

When emotional health is ignored, mental and physical health often suffer. Developers might experience stress-induced headaches, lack of focus, and emotional exhaustion, which can lead to longer-term burnout.

Developer Health OS (Operating System)

As awareness of developers' health grows around developers face, there has been increasing interest in creating systems to support their well-being. One such initiative is the Developer Health OS — a framework that aims to provide developers with resources, tools, and support for managing their health holistically.

The Goal of Developer Health OS

The initiative seeks to:

Support developers in managing stress. Through tools, techniques, and frameworks that help developers use stress productively.
Promote mental and emotional well-being. Encouraging conversations around emotional health and providing support mechanisms for handling stress and burnout.
Enhance physical health. Offering advice on ergonomic workspaces, physical exercises, and work-life balance strategies.

The goal is to empower developers not just to work harder but to work smarter with their health and well-being as priorities. This kind of support system is essential in an industry where long hours and high mental demands are common.

Conclusion

The article highlights the importance of stress management and its impact on developers' well-being. It explains how stress can be beneficial and harmful, emphasizing the need for a mindset shift. Emotional health, often overlooked, is important for managing stress and maintaining productivity. Concepts like "power naps" are reframed to show the importance of how health initiatives are presented. A holistic approach is essential, balancing mental, physical, and emotional health. The Developer Health OS initiative is introduced as a framework to support overall well-being, and prioritizing these aspects is key for long-term success in the tech industry.

**P.S. This article is an excerpt from “How to Optimize Developer Health, Burnout Recovery, and Performance” from the <Contejas /> podcast. Listen to the full episode on Spotify and Apple. Don’t forget to follow, like, and share with your network!

How to Optimize Performance in Tailwind W/ Shruti Balasa

Joshua Abel Alhassan — Thu, 12 Sep 2024 13:37:09 +0000

This article is from a clip from the ConTejas Code Podcast. Watch the full episode on YouTube: Shruti Balasa: How to Maximize Succes...

Introduction

The guest in this episode is Shruti Balasa, an expert consultant and educator of tailwind CSS.

Tailwind CSS is a utility-first CSS framework that helps you write extremely fast CSS. What that means is that Tailwind is atomic. Meaning, with Tailwind you write one class name as a class attribute, equating to one CSS rule.

Tailwind CSS has a bunch of trade-offs and the guest in this episode captured the nuance of all these trade-offs in the “Deep Dive Discussion with IT expert Shruti Balasa”. It is a really fun deep dive and the host (Tejas) and guest (Shruti) talked about cases where Tailwind is good, cases where Tailwind isn’t helpful, some ways it can add value or detract value, and most importantly how it works on the inside using its just-in-time compiler and other tricks. This is a real treasure of information and I hope you enjoy it.

A big criticism that I’ve hard from CSS “haters” which I think they’re wrong, is that Tailwind CSS generates one class name per-rule. So like flex is only `display: flex`, nothing more in that declaration. So some people who maybe aren’t familiar with the concept of atomic CSS for Tailwind or utility classes, they criticize Tailwind saying that it’s a massive CSS file in megabytes shipped to your users. What’s an appropriate response to that?

The response to that according to Shruti Balasa is: in larger projects, you are likely using flex on almost all your elements. Let’s say you have 100 elements where you’re applying flex classes. If that rule is defined in your stylesheet, it’s only generated once. Now, compare that to a scenario where you have 100 elements in your stylesheet, each with its own display flex rule written 100 times. So, how can you say one approach is okay, and the other isn’t?

Eventually, when you examine the entire project and its stylesheet, it kind of balances out. In fact, most projects end up with CSS files that are less than 10KB. Essentially, the styles generated aren't as you might think. Even if it's just one rule, you’re using that rule across multiple places, which ultimately helps reduce the size of the stylesheet itself.

Two Examples to demonstrate using Tailwind CSS

Using Tailwind CSS with utility classes – Flexbox is applied via Tailwind's utility class (flex). The class is defined once in the Tailwind stylesheet and applied to multiple elements.
Manually writing the same display: flex rule for each element – This shows how redundant CSS can be when manually adding display: flex for each element.

Example 1: Using Tailwind CSS Utility Classes

Here, we apply the flex class from Tailwind to 100 elements. The flex class is defined once in the Tailwind CSS stylesheet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Flex Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="grid grid-cols-5 gap-4 p-4">
        <!-- 100 flex elements -->
        <div class="flex items-center justify-center h-20 bg-blue-500">1</div>
        <div class="flex items-center justify-center h-20 bg-blue-500">2</div>
        <div class="flex items-center justify-center h-20 bg-blue-500">3</div>
        <!-- Add 97 more elements with the same flex class -->
        <div class="flex items-center justify-center h-20 bg-blue-500">100</div>
    </div>
</body>
</html>

Example 2: Manually Writing `display: flex` for Each Element

In this example, you are writing custom CSS for each of the 100 elements, which is inefficient and redundant. Each rule is repeated in the stylesheet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manual Flex Example</title>
    <style>
        /* Manually defining display: flex for each element */
        .item-1, .item-2, .item-3, .item-4, /* add up to .item-100 */
        .item-100 {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 5rem;
            background-color: #3b82f6; /* Blue color */
        }
    </style>
</head>
<body>
    <div class="grid grid-cols-5 gap-4 p-4">
        <!-- 100 manually flexed elements -->
        <div class="item-1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <!-- Add 97 more elements with manual flex styling -->
        <div class="item-100">100</div>
    </div>
</body>
</html>

Tejas’ Comment

I love this because it makes the case for Tailwind CSS beyond just the conveniences it offers, such as context switching, class naming, and base reset styles. Outside of these developer conveniences, there's also a clear benefit to the end user.

In practice, Tailwind CSS ships less code than traditional CSS. Typically, in an application, if you have 100 different classes that include the rule display: flex, you end up shipping that line—display: flex—100 times more than necessary.

However, with Tailwind CSS and its utility classes, the rule display: flex is shipped only once. That's like a 100x improvement in how much code you ship, making it both efficient and performant.

There’s also something that Tailwind used to do where it would be as part of the PostCSS process where it reads your source code and looks at the class names you’re using and then from that big final generated CSS file would just remove classes you’re not using as a build optimizing. Is that still the case, how does that impact performance, positively of course?

According to the guest, Shurti Balasa, she explained that back in version 2, Tailwind CSS had tens of thousands of fixed class names. Every single class name you see in the documentation was included in the stylesheet. During development, you'd take that entire set of classes and only use the ones you needed, but you had to manually purge the unused ones before deploying to production. As a result, your production stylesheet would be different from your development stylesheet. That was how it worked back then.

Then came the Just-In-Time (JIT) compiler. What JIT does is it doesn’t generate the entire stylesheet during development. Instead, it only generates the styles that are actually present in your source code from the start. This means that your development stylesheet is the same as your production stylesheet. The JIT compiler became the default from version 3 onwards, so developers using Tailwind version 3 or later don’t even need to worry about the old purge process. If they come across discussions in blog posts or videos about purging stylesheets, they might wonder, "Do I have to do this?" But no, Tailwind now only generates the styles that are in your source code from the beginning, making the process more efficient.

Tejas' Comment

There's a big engineering optimization and performance insight here that many developers can take away.

From Shruti’s explanation, I’ve understood that in version 2, Tailwind first generates a large CSS file. Then, it read the source code to identify which classes were used and removed the unused ones from the CSS. However, with the Just-In-Time (JIT) compiler introduced in version 3, instead of generating a large bundle and trimming it down later (tree shaking), Tailwind starts by reading your code and only generates the necessary styles from the beginning.

For example, in code, JavaScript is super-optimized. The engines are optimized to the point where it’s very difficult, oftentimes, to de-optimize yourself in JavaScript—meaning to do something that causes the engine to do more work than necessary, resulting in slower performance. But people still do it. In React, for example, they try to make it easy to build performance-optimized applications, but sometimes, in an effort to optimize your code, you end up de-optimizing it. This can mean causing unnecessary memory allocation. In the case of imports, sometimes you can import modules in a way that doesn’t allow tree shaking, so you end up de-optimizing. In Tailwind, with the JIT and all these optimizations, are there ways developers should know that they may be de-optimizing their code? And if so, what can they do about it?

Shruti Balasa explained that, maybe not de-optimizing, but one thing developers need to know is that their class names will not be discovered if they’re broken. For example, let’s say you add a bg somewhere, maybe in a React component, and you’re writing a conditional class name like:

// Incorrect Example
const Button = ({ success }) => {
  return (
    <button className={`bg-${success ? 'green-500' : 'red-500'} text-white p-2 rounded`}>
      Click Me
    </button>
  );
};

In this case, the classes are broken in the code. Tailwind will not be able to discover them. The class names have to be complete like bg-green-500 or bg-red-500.

This is because Tailwind uses pattern matching, and for Tailwind, green-500 is not a valid class name, but bg-green-500 is. So, if you’re going to have conditional class names in your JavaScript files, they have to be complete. Don’t split them anywhere. That’s probably the only thing developers need to know.

// Correct Example
const Button = ({ success }) => {
  const bgColor = success ? 'bg-green-500' : 'bg-red-500';
  return (
    <button className={`${bgColor} text-white p-2 rounded`}>
      Click Me
    </button>
  );
};

Conclusion

In this episode of "Optimizing Performance In TailwindCSS", Shruti Balasa clearly explained the power and ease of use of Tailwind CSS, particularly focusing on its utility-first approach and performance optimizations. From breaking down common misconceptions about Tailwind’s file size to explaining the significant improvements brought by the Just-In-Time (JIT) compiler, Shruti Balasa makes a compelling case for why Tailwind is not just a developer-friendly framework but also highly efficient for large project development.

Her explanations and experience helped simplified how developers can avoid mistakes, and optimize their Tailwind usage for both simplicity and performance. Whether you're a beginner or experienced developer, this article provides you with key insights that can help you write better TailwindCSS in your projects.

Partners and Sponsors

The podcast this article is derived from is offered to you at zero cost and the way we do that is through partners and sponsors. Let’s take a moment to acknowledge them.

CodeCrafters

The podcast is partnered with code crafters. Code Crafters teaches developers how to get better at the tools they use every day and the languages they use. With Code Crafters you re-implement things like Redis, git docker, and tools you use in a language you know or want to get better at languages, like JavaScript or Python. By doing this, you get better at JavaScript or Python or whatever you choose and you also understand the tool implementing it from scratch in these languages. They have a generous free tier, but you could get 40% off if you use this link https://tej.as/codecrafters.

Stately.ai

has also partnered with stately.ai. Stately is a great way to visualize the flow of state across your application using state machine state charts. You can then export these state charts to actual code where you can fill in the business logic and create an application. If you would like to give that a try, visit stately.ai.

THAT Conference

Finally, the podcast is partnered with “THAT Conference.” THAT Conference is a family-style conference that happens in a water park twice a year in Wisconsin and Texas, and we often give away free tickets. If you want to attend that conference, share this episode on social media, and you will enter a raffle to do so.

PS: This article is an excerpt from the podcast. Listen to the full episode on Spotify and Apple. Don’t forget to follow, like, and share with your network!

HNG11 Task 0: Article about Frontend Technologies

Joshua Abel Alhassan — Tue, 02 Jul 2024 09:56:19 +0000

Introduction

In web development, it's important to work quickly, handle growth, and keep things easy to maintain. Developers use web frameworks to help with this. These frameworks are tools that make it easier to build websites and web apps. Instead of building everything from the ground up each time, developers can use these frameworks to save time. Web frameworks provide ready-made code, tools, and guidelines that help developers focus on the unique parts of their projects.

In this article, I will be talking about React and Angular as a web framework, and why I prefer React to Angular.

What is Framework?

A framework is an organized, pre-configured collection of best practices, libraries, and tools that serve as a basis for creating software applications. It provides a consistent approach to developing and implementing applications, freeing developers from the tedious and low-level details to concentrate on the features of their projects.

What is React?

React is a JavaScript package available as open source that is used to create user interfaces, especially for single-page apps that have dynamic data.

Facebook, along with a group of corporations and individual developers, maintains React.

Unique Features of React

Component-Based Architecture: Components are the building blocks of user interfaces in React. We build complex UIs (User Interfaces) by building and combining multiple components
Virtual DOM: To maximize changes to the real DOM, React makes use of a virtual DOM. React modifies the virtual DOM before comparing it with an earlier snapshot of the virtual DOM if an object's state changes. It determines the most effective method for updating the actual DOM, reducing the amount of modifications required and enhancing performance.
Declarative Syntax: React gives developers the ability to specify how the user interface (UI) should appear in a specific state.
JSX: A syntax that combines HTML, CSS, JavaScript, as well as referencing other components. We describe how components look like and how they work using a declarative syntax called JSX

What is Angular?

Angular is a JavaScript/TypeScript, HTML, and CSS platform and framework for creating client-side web applications.

Angular is a complete solution for creating dynamic, single-page applications (SPAs). It is developed and maintained by Google.

Unique Features of Angular

Component-Based Architecture
Typescript
Two-Way Data Binding
Routing

Why I prefer React

Learning Curve: React is easier to learn due to its simpler API and focus on building UI components.
Flexibility: React provides more freedom to choose libraries and tools for routing, state management, etc.
Performance: React uses a virtual DOM for efficient updates, making it fast for high-frequency updates.
Component Reusability: React encourages building small, reusable components.
Community and Support: React is backed by Facebook, with a large community and extensive ecosystem of third-party libraries.
JSX: React uses JSX, which allows HTML to be written inside JavaScript. This can make it easier to understand the structure of components.

React Component Example

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

Angular Component Example

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-greeting',
  template: '<h1>Hello, {{name}}!</h1>',
})
export class GreetingComponent {
  @Input() name: string;
}

Conclusion

In conclusion, a framework serves as a blueprint that guides and supports developers in building scalable, and maintainable applications efficiently.
React has become one of the most popular frameworks/libraries for front-end development due to its efficiency, flexibility, and the big ecosystem that supports it. Whether building a simple website or a complex web application, React provides the tools and patterns necessary to create high-performance, scalable user interfaces.

Deep Dive into Chrome Alarm API: Scheduling Timed Events in Chrome Extensions

Joshua Abel Alhassan — Tue, 30 May 2023 12:59:22 +0000

Outline

Introduction
Understanding the Chrome Alarm API
- What is the Chrome API?
- Key Features and Benefits
- Use Cases
Getting Started with the Chrome Alarm API
- Installation and Setup
- Chrome Alarm API Basics
Advanced Usage and Techniques
- Repeating Alarms
- Updating and Clearing Alarms
Best Practices and Considerations
- User Experience Considerations
- Security and Permissions
Example: Creating a Reminder Chrome Extension
Conclusion

Introduction

The Chrome Alarm API is a powerful tool that allows developers to schedule and manage timed events within their Chrome extensions. Whether you want to create reminders, automate tasks, or perform actions at specific intervals, the Chrome Alarm API provides the necessary functionality to enhance the capabilities of your extension. In this article, we will dive into the details of the Chrome Alarm API, its features, usage, and best practices.

Understanding the Chrome Alarm API

What is the Chrome Alarm API?

The Chrome Alarm API is a feature in the Chrome browser that lets developers schedule and control timed events in their Chrome extensions. It’s like having an alarm clock inside your extension.

The Chrome Alarm API is important because, it allows developers to make their extensions do things at specific times or after a certain amount of time. For example, they can set reminders, update information in the background, or show notifications to users at the right moment.

Imagine you have a weather extension. With the Chrome Alarm API, you can make it automatically refresh the weather data every hour. Or, if you have a to-do list extension, you can set it to remind you of important tasks at specific times throughout the day.

To draw a relatable analogy, think of the Chrome Alarm API as the traditional alarm clocks. Just like how you can set an alarm on a clock to wake you up or remind you of something at a particular time, the Chrome Alarm API functions similarly. Instead of waking you up, it helps the extension perform tasks, show notifications, or update information at specific times.

Key Features and Benefits

The Chrome Alarm API offers several key features and benefits for developers:

Scheduling: Set alarms to execute code or trigger actions at specific times or intervals.
Automation: Automate processes within your extension by utilising timed events.
Reminders: Create reminder functionality to notify users about important events or tasks.
Background Tasks: Perform background tasks periodically based on alarms.

Use Cases

The Chrome Alarm API can be applied in various scenarios:

Reminder Extensions: Develop extensions that remind users of important tasks, appointments, or breaks at predefined intervals.
Automation Extensions: Build extensions that perform automated tasks at specific times, such as data updates or synchronisation.
Background Processes: Utilises alarms to trigger background processes, like checking for updates or performing periodic maintenance.

Getting Started with the Chrome Alarm API

Installation and Setup

Before diving into Chrome Alarm API, ensure you have a development environment set up for Chrome extension development. This typically involves installing the Chrome browser and a code editor of your choice.

Recommendation: Visual Studio Code

Chrome Alarm API Basics

The Chrome Alarm API provides a way for developers to schedule timed events within their Chrome extensions. Here’s how it works

Creating an Alarm: Developers can use the chrome.alarms.create method to set alarms. This method allows them to specify the time or delay for the alarm to trigger. For example, they can set an alarm to go off in 30 minutes or at a specific time tomorrow. Each alarm is given a unique name for identification.



chrome.alarms.create("myAlarm", { delayInMinutes: 10 });

Handling Alarms: To handle alarm triggers, you can use the chrome.alarms.onAlarm event listener. This allows you to execute specific code or actions when the alarm event occurs. When the scheduled time or delay is reached, the Chrome browser triggers the alarm. Developers can define what actions should be taken when an alarm is triggered. This could include executing specific code or performing certain tasks within the extension.



chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === "myAlarm") {
        // Perform desired actions here
    }
});

Advanced Usage and Techniques

Repeating Alarms

If you want to create recurring alarms, you can specify the periodInMinutes property when setting the alarm. This will cause alarm to repeat at the specified interval.

Example:



chrome.alarms.create("recurringAlarm", { periodInMinutes: 60 });}

Updating and Clearing Alarms

You can modify or cancel existing alarms using the chrome.alarms.clear and chrome.alarms.clearAll methods. This allows you to update you alarm settings o remove alarms as needed.

Persistent Alarms

By default, alarms are cleared when the user restarts their computer or browser. However, you can create persistent alarms using the chrome.alarms.create method with the persistent property set to true. These alarms survive browser or system restarts.

Best Practices and Considerations

User Experience Considerations

Be mindful of alarm frequency to avoid excessive notifications or disruptions to the user.
Provide options for users to customise alarm settings, such as the ability to enable/disable alarms or adjust intervals.

Security and Permissions

Request only the necessary permissions for alarm functionality to maintain user trust.
Handle alarm-related security considerations.

Example: Creating a Reminder Chrome Extension

In order to practise the usage of the Chrome Alarm API, we will work through the process of creating a simple Reminder Chrome Extension. This extension will allow users to set reminders for important tasks or events, and it will display notifications when the reminders are triggered.

Setup:
- Set up a new directory for your Chrome extension project.
- Create the necessary files. manifest.json, popup.html, popup.js, popup.css, and background.js.
Manifest File:
- Fill in the basic details of your extension, such as name, version, and permissions, in the manifest.json file.
- Specify the necessary permissions, such as alarms, notifications, and activeTab. Example: Manifest.json ```

{
"manifest_version": 2,
"name": "Reminder Extension",
"version": "1.0",
"description": "A simple reminder extension",
"permissions": ["alarms", "notifications", "activeTab"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
}

- **Popup HTML:**
    - `Create the popup`.html file, which will serve as the interface for users to set reminders.
    - Design a simple form with an input field for the reminder message and a button to set the reminder.
Example `popup.html`

<!DOCTYPE html>

Set Reminder

- **Popup JavaScript:**
    - Add the necessary JavaScript code in `popup.js` to handle the form submission and set the reminder using the Chrome Alarm API.
Example `popus.js`

document.getElementById("reminderForm").addEventListener("submit", function(event) {
event.preventDefault();

const reminderMessage = document.getElementById("reminderInput").value;

chrome.alarms.create("reminder", { delayInMinutes: 1 });
chrome.storage.local.set({ reminderMessage });

window.close();
});

- **Background JavaScript**
    - Create the `background.js` file to handle the alarm triggers and display notifications.
Example: `background.js`

chrome.alarms.onAlarm.addListener(function(alarm) {
if (alarm.name === "reminder") {
chrome.storage.local.get("reminderMessage", function(data) {
const notificationOptions = {
type: "basic",
iconUrl: "icons/icon48.png",
title: "Reminder",
message: data.reminderMessage
};
chrome.notifications.create(notificationOptions);
});
}
});

- **CSS Styling**:
    - Style the `popup.html` file by creating a `pop.css` file.
- **Testing:**
    - Load the extension in the Chrome by navigating to chrome://extensions and enabling the developer mode.

![Load extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55q0x3t6ms5su0fx63ck.jpg)

- Click the Load Unpacked and select the directory containing your extension files.

![Load unpacked and select directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vupggo9np58njj2ns4z.jpg)


- Test the extension by setting a reminder and verifying that the notification works.

![Test the extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc7zdpvndphnmlftav05.jpg)

## Conclusion
In this article, we explored the key aspects of the **Chrome Alarm API**. We discussed its purpose and benefits, highlighting its ability to schedule tasks, automate processes, and enhance the user experience. We also examined the core components of the API, such as setting alarms using `chrome.alarms.create` and handling triggers with the `chrome.alarms.onAlarm` event listener.

Furthermore, we delved into advanced techniques, including repeating alarms, updating and clearing alarms, and working with persistent alarms.

Lastly, if you enjoyed this article, please like, comment, and share with your friends on socials.

_**PS:** This article is inspired by Aderemi Okeowo. The best mentor I know. Thank you so much sir for all you do._

_You can check him out on Twitter: @qtguru and LinkedIn: Okeowo Aderemi_

A Guide to Chrome Extension Configuration: Manifest.json File

Joshua Abel Alhassan — Sun, 28 May 2023 03:36:31 +0000

Outline

Introduction
What is manifest.json
Key Components of the manifest.json
Best Practices for manifest.json file configuration
Conclusion

Introduction

The manifest.json file plays a vital role in the development of Chrome extensions. It serves as a configuration file that provides essential information about the extension to the Chrome browser. Understanding its structure and properties is crucial for building powerful and functional extensions. In this article, we will explore the manifest.json file in detail, discussing its purpose, key components, and best practices for creating robust Chrome extensions.

What is `manifest.json`

The manifest.json file is a crucial component of a Chrome extension which serves as a configuration file that provides important information about your extension to the Chrome browser. This file acts as a central hub, defining various properties and settings for your extension.

Key Components of `manifest.json`

Extension Details: This section contains general information about your extension, such as its name, version, description, and author details.

{
  "manifest_version": 2
}

The manifest_version indicates the version of the manifest file format being used. 2 refers to the current version.

Permissions: In this section, you declare the permissions your extension requires to function correctly. These permissions can include accessing specific websites, interacting with tabs, retrieving data from the browser's storage, or requesting additional user permissions. It is crucial to specify only the necessary permissions to maintain user trust.

{
  "name": "My Extension",
  "version": "1.0",
  "description": "A brief description of my extension.",
  "author": "Your Name"
}

The permissions section lists the required permissions for the extension, such as tabs for accessing tab-related functions, storage for accessing the browser's storage, and https://www.example.com/ for accessing a specific website.

Background Scripts/Event Pages: If your extension requires scripts to run continuously in the background or handle events, you can specify them in this section. These scripts can perform tasks like monitoring browser events, handling incoming requests, or performing periodic actions.

"background": {
  "scripts": ["background.js"],
  "persistent": false
}

The background section defines a background script called background.js, which run persistently in the background.

Content Scripts: Content scripts allow your extension to interact with and modify web pages. You can define which URLs your content scripts can access and specify when and how they should be injected into web pages.

"content_scripts": [
  {
    "matches": ["https://www.example.com/*"],
    "js": ["content.js"]
  }
]

The content_scripts section specifies a content script called content.js which will be injected into web pages that match the specified URL pattern (’https://www.example.com/).

Browser Actions/Page Actions: This section is used if your extension needs to add a button or an icon to the browser’s toolbar. Browser actions represent actions available to the user throughout their browsing experience, while page actions appear only on specific pages based on conditions defined by your extension.

"browser_action": {
  "default_icon": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "default_popup": "popup.html"
}

The browser_action section adds a button to the browser’s toolbar with icons of different sizes. Clicking the button triggers a popup displayed by the popup.html file.

Options Page: If your extension requires user-configurable options, you can define an options page in this section. The options page provides a dedicated interface for users to customise the behaviour of your extension.

"options_page": "options.html"

The options_page section specifies an options page called options.html for configuring the extension.

Icons: You can specify various icons for your extensions to represent it in different contexts, such as the browser’s toolbar, settings page, or the Chrome Web Store.

"icons": {
  "16": "icons/icon16.png",
  "48": "icons/icon48.png",
  "128": "icons/icon128.png"
}

The icons section provides icons of different sizes to represent the extension in various contexts.

Note: Remember to replace the filenames, URLs, and icon paths with your actual file locations and URLs.

Best Practices for `manifest.json` file configuration

Minimal Permissions: Request only the necessary permission s required for your extension’s functionality. This helps build user trust and improves the installation experience.
Error Handling: Handle errors gracefully when your extension’s background scripts and event pages to prevent issues from affecting the browsing experience.
Efficient Content Scripts: Optimise your content scripts to minimise their impact on page loading and performance.
Consistent Iconography: Provide Visually appealing and consistent icons to represent your extension in different contexts, enhancing its recognition and usability.
Testing and Debugging: Regularly test your extension, debug any issues, and utilise browser developer tools for troubleshooting.

Conclusion

The manifest.json file serves as the backbone of a Chrome extension, providing crucial configuration details to the browser. Understanding its structure, components, and best practices is essential for building successful extensions. By properly configuring the manifest.json file, developers can define their extension’s behaviour, appearance, and capabilities, ultimately creating a seamless and engaging user experience. With this knowledge, you are well-equipped to embark on your journey of creating powerful Chrome extensions.

Crucial Guides to Grow Community Engagement

Joshua Abel Alhassan — Thu, 29 Dec 2022 07:19:58 +0000

Outline

Introduction
Tips to Grow Community Engagement
Conclusion

Introduction

If you want to build anything at all, you should always have a measuring metrics so you know whether you’re in the right or wrong direction. So the goal for this lecture is we want to build 20% DAU/MAU (Daily Active User/Monthly Active User).

Tips to Grow Community Engagement

Share Content Regularly: A community is like a theme park. It’s a meeting ground for a group of people, if you can’t keep people from coming back with some attractions they’re just not going to come back. Content is one method in which we can apply an attraction into our community to keep people coming back. If people can come back to your community and consume content, that’s going to help them to grow new skills, solve their problems then they’re going to keep coming back.
They’re two side to sharing content regularly:

Produce original content: These are materials that you put together for your community. Focus on what’s unique to your community.
Shared Content: This is when you find other resource online and you share it within your community. It’s important you credit the original author when sharing online resources. It is very important. Constantly sharing content build engagements.
Kick off Weekly Chats: What this means is, every week you start a discussion and it can be potentially themed in some nature.
Shared Content: This is when you find other resource online and you share it within your community. It’s important you credit the original author when sharing online resources. It is very important. Constantly sharing content build engagements.
Run a group Meeting: Run a group meeting from time to time with a goal in mind, like discussing a particular project or topic. Examples of things to consider, topic of discussion, and have an outcome.
Respond to Everything: This is a super mystery that keeps interaction going. Respond to members greetings, respond to new members introductions, respond to questions, respond to suggestions etc. Anytime a member of your community post anything, respond in some way (like [emoji reactions] and leave a comment). Reasons for this is because we as human beings, we need validation. So, if we provide validation and recognition to members of our community, they’re more likely to come back and keep engagements going. Still while at this, encourage and be supportive.

Conclusion

Growing Community Engagement is a topic covered in this article, along with strategies we may use to maintain an increase in activity. These strategies include providing information frequently, beginning weekly chats, holding group meetings, and replying to everything..

PS: This article is my note from Jono Bacon's lecture on "4 Essential Tips To Grow Community Engagement".

Credits: Jono Bacon
Photo Credit: Stocks Photo

Building Community Engagement: Grow your community in Simple Steps

Joshua Abel Alhassan — Tue, 27 Dec 2022 08:10:31 +0000

Table of Content

Introduction
What is Community Engagement?
Why you Need Active Members in Your Community
How to Measure Active Members
How to Build Growth Mindset Around Engagement
Conclusion

Introduction

Communities that struggle to grow and thrive all seem to wrestle with one key, and that is building community engagement.

What is Community Engagement?

Communities that struggle to grow and thrive all seem to wrestle with one key, and that is building community engagement.

The number of people in a reasonable healthy community who you would expect to be active is about 20% to 30%. About 80% therefore, of people in that community are not going to be active and these are the people who are just going to be consuming and enjoying the contents shared in the community. They are not going to be actively creating contents/materials. But what we want to do is to zone in on the target number i.e 20%.

Why You Need Active Members in our Community

Health: Highly engaged members of your community are essential for community health. if you want to have a highly thriving community then you need to have engaged members. So you need to generate your focus and energy into creating content for members of the community.
Value creation (members who create content): There’s a direct correlation between value and good experience. When members are constantly creating contents/value (answering questions, creating materials etc), they feel like they’re having good experience and a positive impact on the community, therefore they want to keep coming back and that’s going to create sustainability in your community.
Grow / Scale: You need active engagement in a community to grow and scale, else the community is not going to survive.

How to Measure Active Members

What you would want to do to measure active members is to set a target metric.

Side note: Goals are just a fiction of the future, something we have to invent, plan and aspire towards.

DAU/MAU: To measure active members in a community, you are going to take the number of Daily Active Users (DAU) and divide it by the number of Monthly Active users (MAU).

DAU / MAU * 100%

Example: A community have 10 daily active users and 80 monthly active user, calculate the measure of active members or user that community have in a month.

10 / 80 = 0.125

0.125 * 100% = 12.5% active user in a month.

How to Build Growth Mindset Around Engagement

They're basically four things in respective order.

Set Monthly Target: This might be 20% minimum or 30% stretch active users engagements. Be realistic about this. Every single week or month you want to measure and track this.
Members Needs: Members will only engage in communities if they know they are going to get something of value out of it. The way to figure out members needs is to figure out their needs and pain points, what they’re struggling with right now.
Brainstorm Interaction Events: To do this, what you’re going to ask or figure out is “How do I resolve one of those points” in a way that generates something that’s interactive. Create something in your community whether it’s a content, conversation start, a hackathon etc. Do something that’s going to get people (members of your community) interacting on how they resolve the pain points aforementioned. The key thing here is getting people to interact, no matter how small.
Track what works.

What all the above mentioned engagement will do when you apply the techniques and you measure it effectively is that you would build your engagement and get more members into the 20% active user slot. If you stop measuring things, they won’t get better.

Conclusion

In this article, we looked at what a community engagement is, why we need active members in our community to keep it alive and not ghosted, how we measure active members in our community and how we build growth mindset around community engagement.

PS: This article is a note from Jono Bacon's lecture on "What is Community Engagement and How do you Build it?"

Q&A with Tejas Kumar from Dx-Mentorship Session

Joshua Abel Alhassan — Mon, 26 Dec 2022 23:49:20 +0000

Outlines

Introduction
Dx-Mentorship
Q&A Session
Closing Thoughts

Introduction

DevRel is a relatively new field in the tech space and getting started without guidelines or mentorship can be difficult. Lot’s of people wanting to get into DevRel are seeking answers to questions to help them navigate the DevRel path. So in this Q&A article, I decided to put to writing answers to questions asked by several members of Dx-mentorship program during a live session with Tejas Kumar.

Dx-mentorship is a DevRel mentorship program designed to charge you into DevRel in 3 months. The mentorship program gets you equipped with knowledge and information that will propel you into a fulfilling Developer Advocacy career, working with industry experts and real world scenerios to prepare you for the job you’ve always wanted!.

Q&A Session

Q1. Do we need to be good at just one modality- speaking for example. Or is the expectation from companies to be good at all - speaking, writing, and more?

Anu

Answer
Instead of optimising for what companies expect, it is important to optimise for what you’re naturally gifted with, and then the company will recognise that and hire you based off of that. And no matter what mode you choose, you will automatically become more valuable to them. You need to find one mode first and be good at it, then adding others subsequently.

Tejas Kumar

Q2. I totally agree with the point that people pay money for conferences to learn rather than listen to DevRel promoting their products. Is it a top level problem starting from the companies expectation of DevRel or is it from arising from DevRel doing it incorrectly? What’s the way to address this issue?

Anu

Answer
It might be both (DevRel doing it incorrectly and top level problem), but it’s definitely a top level problem and that’s just because certain companies just don’t know how to do good DevRel. That’s because, they try to measure it like some quarterly thing you can measure, and they fail. But also, it is the fault of the DevRel employees themselves, that they don’t push back
and try to do DevRel internally. The way to address this issue is to have quantitative results about the long term value of DevRel.

Tejas Kumar

Q3. It can be uneasy to walk up to a total stranger at an event and have meaningful conversations. Some people are also generally unapproachable at a first glance. How do you navigate that sea of uncertainty

Kenny

Answer
I learned many years ago that when people are unapproachable, rude, or not welcoming, it really says a lot more about them than it does about you or your company. The best thing to do at that point is collect it as data, take them to the team internally, and you reiterate. That’s a huge part of DevRel. At some point that data, you are going to use it and it’s going to inform your product decision, and in this case, you’re the product. Why do people not want me to approach them, what can I do, what training can I invest in? Just take it as a data point, learn from it and move on.

Tejas Kumar

Q4. I enjoy speaking and I’ve spoken at a couples of conferences and teaching, I also have experience managing developer communities. It seems a lot of companies want writers, I’ve asked a couple of DevRel engineers and I’ve been told I could write more too. Isn’t a DevRel engineer supposed to have their strengths? Must one write consistently to be a DevRel engineer?

Ifeoma Nwosu

Answer
Yes, you have your strength. Also, No, you must not write consistently to be a DevRel engineer. Writing could be a strength but it is not the only strength. Speaking is a great strength. Teaching is the meta strength, like strength above all the strengths, because writing, speaking, video contents creation is all coming back to teaching. Great DevRels put awesome thoughts into their communication, always. This is a great tip for your DevRel journey.

Tejas Kumar

Q5. I'm transitioning from marketing to tech through DevRel. Would you say being an experienced programmer is a prerequisite to being a good DevRel?

omoalhaja Abiola

Answer
Not necessarily. I think DevRel and programming skills can be learned at the same time. In fact, a lot of developer advocates do learn in public, like live streaming their learning, and because they are great at teaching, they’re also great at teaching while they’re learning. So, being experienced programmer isn’t a prerequisite for DevRel. But, is it a boost? Absolutely, because if you’re going to be doing developer relations, you are going to need to speak developer’s language. Don’t take this too extreme.

Tejas Kumar

Q6. Can introverts succeed as DevRels?

ZONA

Answer
Yes. in fact, one of the best DevRel I know on Twitter as Atila Fassina, he is a proper introvert and very applauded as a DevRel. You could as an introvert think a little bit differently. You could maybe give tips on “doing DevRel as an introvert” if you’re interested. Now, you need to be aware that doing DevRel as an introvert is going to drain you, but you need to internalise that investment into someone is worth the cost. Another point is, you need to consider that the people you are going to meet as way more important than yourself, and this is going to motivate you.

Tejas Kumar

Q7. How can we start with submitting relevant CFPs without any experience as most of the places demand previous proof of work through technical speaking events?

Nayana Kumari

Answer
Based off from my experience, I have seen CFP forms, they don’t demand experience. For jobs, Yes. But for conferences, No. If you want to write relevant CFPs, I would recommend thinking about a problem you had, and how you solved it. Like a case study in a great way. A personalised solution to a problem is a great CFP. If you don’t have any problem that you’ve solved, should you be doing a talk? Should you be submitting a CFP? This is a question I will like to leave with you. I like to think it is a prerequisite to have things to talk about before submitting a CFP.

Tejas Kumar

Q8. How can we have an active presence from off-twitter platforms?

Nayana Kumari

Answer
YouTube for example, assuming you create videos regularly. The key to having an active presence on platforms is to do the thing that you enjoy, and when people see and enjoy it, it becomes contagious. A lot of people tell me that the talks I gave are some of the best talks they’ve heard in their lives, and the reason they do that is because, I really just enjoy myself. Let your definition of successful be, did you have fun, did you enjoy it? because when you enjoy yourself, everybody have a great time and then your talk/content is successful.

Tejas Kumar

Q9. What’d you do if you were starting out in this field (DevRel) in the current timeframe?

Answer
I will not do anything different actually. I know my strength is speaking, it is what I enjoy. And because I enjoy it, I will naturally be good at it. I will find local meetups and speak, I will find a conference and do CFPs. If I start today with no DevRel experience, I will do it exactly the same way I did five years ago.

Tejas Kumar.

Q10. I’m a FrontEnd developer now. I have specific tasks for every sprint I need to focus on and complete. That’s it. But in contrast, from my initial understanding of devrel, I feel its too broad with too many things demanding your attention, energy and time. What advice do you have for us and how did u personally navigate the role migration from developer to devrel yourself?

Anushree

Answer
I was a FrontEnd engineer when I started DevRel. I was doing meetups in the evening after work, I was doing conferences on the weekends to the point where I started getting invited to conferences. But there’s a tension if you’re a full time engineer and doing devrel. Unless, your talks are about your engineering work. This is your other option, you talk about your day to day work. Yes, people would want to hear that.

Tejas Kumar.

Q11. I am just about to graduate and I have done multiple DevRel internships but I don’t have enough technical projects. Should I start my career as a DevRel or a developer to first polish my tech skills and build projects

Reet Batra

Answer
To you (Reet) I would say, why not both? Do an engineering project, and then do a talk on how you built that. That;’s an avenue for you to explore.

Tejas Kumar

Q12. Teaching in DevRel takes different form ranging from tech writing, to video content creation and all for a company looking to invest in video content creation, what would you advise their dev advocate to do as regard video content strategy.What are the tips you would give for video content creation

Pamilerin

Answer
This is going to be different for everybody. I (Tejas Kumar) have a YouTube channel, and I do have my preferences. It depends on what your goals are. My goals with video content creation are to enjoy it, honestly. For me, beautiful videos are important, seeing my face, listening to my voice, body language - this important and is part of my content creation, and it gives me joy.

Tejas Kumar

Q13. As a DevRel, how do you grow or measure your growth in the space. is it important for a Devrel to have a YouTube channel

Olanetsoft

Answer
Two questions in one message. I grow and measure my growth by the quality of my work which is extremely subjective. But, it is me measuring myself. For my YouTube channel, how I measure myself is the quality of my video. Is the quality of my video better in today’s video compared to yesterday’s video? That’s one of my criteria. Is my speaking clear, does my microphone have noise? This is how I grow and measure myself. This is not just DevRel by the way, this is life.
On the second question, absolutely NOT important for a DevRel to have a YouTube channel.

Tejas Kumar

Closing Thoughts

It is very important for you to internalise that it is “DevRel” and not “DevSell.” If your focus is Developer “Relations”, then everything will fall into place. It’s the sense of “I care about you” that makes a relationship good, and this is the essence of DevRel.

Note: This Q&A article is from a live session with Tejas Kumar, hosted by Dx-mentorship.

Photo Credits: Asset Entrepreneur

DevRel 101: The What & Why

Joshua Abel Alhassan — Mon, 26 Dec 2022 00:58:39 +0000

Outline

Introduction
Developer Relations
High Risk, High Rewards
Not Just Content
Conclusion

Introduction

In this article, I am going to talk about DevRel and what it really is. And the reason for that is that DevRel is actually new and young to the point where different people think it is different things and implicit. So what I want to get you to understand in this article is what I see what DevRel actually is.

About Developer Relations

DevRel is Developer Relations. It is about relationships with developers. This point needs to be heard, cemented, absorbed and believed. It is about Developer Relationships. What this tells you is that it is not about sales, it is not about marketing, it is not about promoting or demoing your product so people will adopt it. But it is about Developer Relationships. DevRel is about talking to, and investing in developers. It is about getting to know and listening to them, how they build software etc. Another way of saying this which I want you to take note is; It is all about “DevRel” and not “DevSell”. So, If sales numbers for the company you work for aren’t going up from DevRel, they should hire a sales team. If marketing branding isn’t what they want it to be, they should hire a marketing team. DevRel can work with these departments (sales and marketing), sharing the data from their relationships from developers because they deeply know and understand their developers to help them. Simply, the role of DevRel is to know, love, serve and understand developers and then take that knowledge and understanding from these high quality relationships and use it internally to fuel, motivate and influence other organisations towards the benefits of developers.

High Risk, High Rewards

DevRel is high risk, high reward. According to Tejas Kumar and i quote, “DevRel and angel investing are kind of the same.” With angel investing for example, it has to be money that you’re willing to lose and never see again because angel investments are highly risky. Empirical evidence shows that 9 out of 10 startups will fail. But, that one company that you invested in becomes a unicorn, you get very high rewards. DevRel is similar.

The tension between business people and great DevRel work is, business people will want to measure DevRel, like where’s the money from DevRel? There’s always this attempts to measure because, it gives a sense of control. But, DevRel work is hard if not impossible to measure because, human relationships are hard if not impossible to measure. It is “high risk, high reward.” A company will spend money on DevRel activities, like you’ll sponsor a conference, give swags, speak at conferences, paying money on whatever that you may not see return on, because it is hard to predict. The big mistake however, is treating DevRel like marketing.

Not for Everyone

This might be hard to internalise but, DevRel is not for every company because for different companies, the role of a developer plays a different role.The role of a developer and the relationship with this role from a company to the developer should be the basis for “do we need DevRel?” If the company need DevRel, how comfortable are they making high risk investments in developer communities that they may never see again but the relationships will be high quality and might pay off.

Not Just Content

DevRel is not exclusively like speaking, blog posts, or content in general. DevRel is not just content and evangelism but about Developer Relationships. So, the under guiding current is what is going to create and cultivate and lead this relationship with developers to flourish and be excellent. That’s what DevRel is about. Some times it may mean you’re going to do an educational talk to teach developers with the purpose of helping them to grow through good relationships, it could be a talk, a blog post, going on podcast because it could help developers. the goal is helping them through relationships and not selling.

Conclusion

In this article, we have been able to look at the real meaning and definition of DevRel, what it really is about, its high risk - high reward, and it not just being about contents, but contents that will cultivate and lead good relationships with developers to flourish.

One final thought. Do not hero worship people, or create a transactional relationship with developers solely for the purpose of benefiting from them in the future. It is a SIN in DevRel.

Note: This post was written as part of my DX mentorship live session with Tejas Kumar. All quotes paraphrased/quoted from Tejas Kumar.

Photo credit: Linux Developer conference, Palco.

Forem: Joshua Abel Alhassan

Stress Management and Developer Health

Introduction

Understanding Stress: Is It All Bad?

The Mindset Shift Experiment

Emotional Health: The Overlooked Component

Emotional Health and Its Impact

The Workplace Perception of Emotional Health

The Story of Power Naps

The Origin of Power Naps

The Holistic View: Mental, Physical, and Emotional Health

The Interconnection of Health Domains

Developer Health OS (Operating System)

The Goal of Developer Health OS

Conclusion

How to Optimize Performance in Tailwind W/ Shruti Balasa

Introduction

Two Examples to demonstrate using Tailwind CSS

Example 1: Using Tailwind CSS Utility Classes

Example 2: Manually Writing display: flex for Each Element

Tejas’ Comment

Tejas' Comment

Conclusion

Partners and Sponsors

CodeCrafters

Stately.ai

THAT Conference

HNG11 Task 0: Article about Frontend Technologies

Introduction

What is Framework?

What is React?

Unique Features of React

What is Angular?

Unique Features of Angular

Why I prefer React

React Component Example

Angular Component Example

Conclusion

Deep Dive into Chrome Alarm API: Scheduling Timed Events in Chrome Extensions

Outline

Introduction

Understanding the Chrome Alarm API

What is the Chrome Alarm API?

Key Features and Benefits

Use Cases

Getting Started with the Chrome Alarm API

Installation and Setup

Chrome Alarm API Basics

Advanced Usage and Techniques

Repeating Alarms

Updating and Clearing Alarms

Persistent Alarms

Best Practices and Considerations

User Experience Considerations

Security and Permissions

Example: Creating a Reminder Chrome Extension

Set Reminder

A Guide to Chrome Extension Configuration: Manifest.json File

Outline

Introduction

What is manifest.json

Key Components of manifest.json

Best Practices for manifest.json file configuration

Conclusion

Crucial Guides to Grow Community Engagement

Outline

Introduction

Tips to Grow Community Engagement

Conclusion

Building Community Engagement: Grow your community in Simple Steps

Table of Content

Introduction

What is Community Engagement?

Why You Need Active Members in our Community

How to Measure Active Members

How to Build Growth Mindset Around Engagement

Conclusion

Q&A with Tejas Kumar from Dx-Mentorship Session

Outlines

Introduction

Example 2: Manually Writing `display: flex` for Each Element

What is `manifest.json`

Key Components of `manifest.json`

Best Practices for `manifest.json` file configuration