DEV Community: Adam Naji

How I Connected MDN Documentation to TypeScript's DOM APIs

Adam Naji — Fri, 17 Jul 2026 18:45:47 +0000

It started with a small TypeScript issue.

I came across a problem in TypeScript regarding an incorrect DOM type and decided to fix it. I thought it would be a straightforward task: find the issue, make a change, open a pull request, and move on.

Instead, I fell into a deep rabbit hole.

I began exploring how TypeScript's browser APIs are generated, how web standards work, and how browsers, specifications, and TypeScript interact. What began as a fix for one incorrect type turned into months of contributing to the TypeScript DOM generator.

Little by little, I became more familiar with the project. I discovered edge cases, addressed missing elements, improved definitions, and learned about the connection between web specifications and the TypeScript types that millions of developers use daily.

What is the TypeScript DOM generator?

If you've ever written TypeScript for a browser project, you've likely used APIs like:

document.querySelector("button");

window.localStorage;

fetch("https://example.com");

These types don't just appear out of nowhere. They come from a generated file called lib.dom.d.ts.

The TypeScript DOM generator is the tool responsible for creating that file.

Instead of writing thousands of browser API definitions by hand, it pulls information from web standards and generates TypeScript declarations.

In simpler terms:

Web standards
      ↓
TypeScript DOM lib generator
      ↓
lib.dom.d.ts
      ↓
TypeScript IntelliSense and type checking

This tool serves as the bridge between the browser platform and the TypeScript developer experience.

Falling into the web standards world

While working on TypeScript's DOM generator, I began to learn about topics I had never needed to understand before.

I learned about:

Web IDL
W3C specifications
WHATWG standards
Browser engines like Blink and Gecko
How browser APIs are defined and implemented

Before this, I used browser APIs daily without considering their origins.

Understanding the process behind them changed my perspective on frontend development.

A browser API is not just a function you call. There is an entire process behind it:

Specification
      ↓
Browser implementation
      ↓
Documentation
      ↓
Type definitions
      ↓
Developer experience

The documentation problem

On March 14, 2025, I had an idea.

The TypeScript DOM generator had an outdated apiDescriptions.json file containing API documentation, but it had not been maintained for years.

The issue was that browser APIs constantly evolve. New APIs are added, existing APIs change, and documentation is updated.

I thought:

"Why should TypeScript have outdated API descriptions when MDN already provides documentation for these APIs?"

So, I opened issue #1937:

https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1937

After discussing the idea with the maintainer, Kagami Sascha Rosylight, who works on browser standards with Mozilla and WHATWG, I received the green light to proceed.

Building the documentation generator

On March 15, 2025, I submitted my first pull request for this issue.

The goal was straightforward:

Take documentation from MDN and automatically add it to the generated DOM API definitions.

The final implementation was more complex than my initial idea.

I had to address:

Matching MDN documentation with TypeScript DOM APIs
Handling APIs that lacked documentation
Generating correct JSDoc comments
Integrating with the existing generator pipeline
Ensuring the generated output remained consistent

The final implementation added over 7,000 lines of code, along with a small file of around 112 lines that managed the core documentation generation logic.

That file underwent more than a month of iterations, discussions, and improvements.

Interestingly, the final solution was not enormous. The challenge lay in understanding the ecosystem surrounding it.

A small piece of code can require extensive investigation when it becomes part of a project used by millions of developers.

The pull request journey

Open source is not just about writing code and getting it merged.

The process included:

Discussions with maintainers
Reviewing feedback
Changing the approach
Improving edge cases
Adapting the solution to fit the existing architecture

Each review helped me understand the project better.

The goal was not only to get the code to work but to ensure it could integrate into a long-term project.

The merge

After weeks of effort, the pull request was finally merged on April 17, 2025.

It also happened to be one day before my birthday, which made it even more memorable.

Watching something I contributed to become part of TypeScript's ecosystem was an incredible experience.

The unexpected surprise

Later that month, I found out that Microsoft mentioned my work in an official TypeScript blog post about TypeScript 5.9:

https://devblogs.microsoft.com/typescript/announcing-typescript-5-9/#summary-descriptions-in-dom-apis

I was also mentioned by Theo in one of his videos discussing the update.

What began as a small issue about an incorrect type turned into a contribution that enhanced the experience for developers using TypeScript every day.

What I learned

This experience taught me several things:

Read the code behind the tools you use

Most developers use TypeScript daily without thinking about how its types are formed.

Looking deeper revealed an entire world behind something I previously took for granted.

Specifications matter

Learning about web standards reshaped my approach to frontend development.

The web relies on specifications, and understanding them clarifies the platform itself.

Small contributions can turn into big opportunities

I did not set out to make a sizable contribution.

I began by addressing one issue.

Curiosity led me to another issue, and eventually to a much larger project.

Open source is collaboration

The best part was not just writing code. It was working with maintainers, receiving feedback, and refining the solution together.

A small TypeScript issue introduced me to web standards, browser APIs, and the inner workings of one of the most important tools in the JavaScript ecosystem.

And it all began with a simple question:

"Why is this type incorrect?"

Special Thanks

I would like to thank everyone who helped me throughout this contribution:

Kagami Sascha Rosylight for reviewing my ideas, discussions around the implementation, and helping guide the direction of the project.
Jake Bailey for his guidance and feedback during the contribution process.
Nathan Shively-Sanders for his feedback and insights from the TypeScript compiler side.

Open source projects are built by communities, and this contribution would not have been possible without the time and feedback from maintainers and contributors.

How I Turned an Arabic Word List into an Automated YouTube Channel

Adam Naji — Wed, 16 Apr 2025 03:46:16 +0000

Hello!
I am a web developer with knowledge of Python, and I am bilingual.

I love educating people and learning new things.

Last week, I came across an amazing but unmaintained GitHub repository created by Dawi Alotaibi, who allegedly works at IBM. The repository contains a huge dataset of Arabic words, sorted alphabetically.

At first, I wasn’t sure whether my idea would succeed, but after some time thinking, I decided to give it a try. I primarily used ChatGPT because I had never worked with MoviePy (a Python library for generating videos). I had a great time experimenting with it. After an hour of working between ChatGPT and the codebase, I managed to write my first simple script that generates a short video with text and audio. The audio is generated using gTTS (Google Text-to-Speech), which gave me a somewhat human-like voice.

On the second day, I connected my simple script to the dataset I obtained from the repository mentioned earlier. I added it as a sub-module and used the built-in open function to read the words from the JSON file. After understanding how to work with the JSON file in Python, I had to make a decision: bulk-generate videos, risking damaging my laptop, or upload them one at a time. I decided to generate one video at a time. To automate the process and avoid manually entering the last word, I created an index.txt file to store the last processed index number.

The next step was uploading the videos to YouTube. I created a new YouTube channel, which was quite easy. Then, I asked ChatGPT to help me create a simple script for uploading videos to YouTube and guide me on how to use it. While the process of getting the token and integrating it was difficult and frustrating, I hope Google can improve it in the future. Once everything was working, I needed a script to automatically upload one video every day. Although I could have run it locally or bought a server, I’m more familiar with GitHub Actions, so I created a simple script to run every day at midnight UTC. This script generates a video, uploads it to YouTube, and pushes a commit with the updated index. And it worked!

Throughout this project, I learned a lot of cool things, like how to use MoviePy and the YouTube API. I’m hopeful that it will succeed. I almost forgot to mention that it's open source and MIT-licensed, so you can check out the code, contribute, or even use it in your personal projects! 😊

Links:

Source code: https://github.com/Bashamega/Say-Arabic/

Youtube Channel: https://www.youtube.com/@SayArabic

🚀 Join the WebDevTools Revolution! 🌐

Adam Naji — Wed, 17 Jul 2024 08:44:50 +0000

Hello Devs! 🌟

WebDevTools is a comprehensive online platform designed to empower web developers with a wide array of code samples and snippets. Whether you are a seasoned professional or just starting your journey in web development, our website provides you with a vast collection of code examples to streamline your workflow, enhance productivity, and create exceptional websites and web applications.

🔗 Check out WebDevTools on GitHub!

Are you passionate about web development? Ready to make a mark in the open-source community? Here's your chance! We're inviting contributors to join our exciting project, WebDevTools!

✨ Why Contribute?

Collaborate with a dynamic community of developers.

Enhance your coding skills and learn new technologies.

Make a tangible impact on a project used by devs worldwide.

Get recognized for your contributions in the open-source world!

🚀 How to Get Started?

Star the repo to show your support.

Fork the project to your own GitHub.

Dive into the code and start contributing!

Your input can make a huge difference! Let's build something amazing together. Happy coding! 💻✨

How to keep your tokens secret?

Adam Naji — Sat, 16 Sep 2023 10:27:02 +0000

Hello:)
In this article we will see how to keep tokens secret.

Adding it to your project

Step 1

Create a file called .env

Step 1

Add values in it.
All caps.
if your js project is in next js then start the key with NEXT_PUBLIC_
example:

USERNAME = "basha coder"

Step 3

To add it in your js project file yu need to make a variable for it like this:

const username = process.env.USERNAME;

Now you have inserted the value into your project, you can use it anywhere by calling the username constant.

Uploading it to Github(optional)

Making sure that the `.env` is not on github

Now you need to create a .gitignore to exclude the .env, and write in it

.env

Uploading the files

Then just upload the code to your GitHub repo

Adding the secret

Go to the settings of the repo, then click on Secrets and Variables then Actions, then click new secret and add your key and value.
If you are using another service for hosting like vercel go to the project setting and go in environment and add from there
Video: https://www.youtube.com/watch?v=9iT86nC2Ubs

GitHub Contributors JavaScript Library Documentation

Adam Naji — Sun, 06 Aug 2023 10:17:01 +0000

The GitHub Contributors JavaScript library provides an easy way to display a list of contributors for a GitHub repository on your website. The library offers various display modes, including grid, slideshow, and list. This document will guide you through the usage and features of the library.

Getting Started
To get started, you need to include the GitHub Contributors library in your HTML document. You can import the library using the following script tag:

<script src="https://bashamega.github.io/scripts/cdn/libs/js/contributingjs/index.js"></script>

Usage
The GitHub Contributors library requires a container element in your HTML to display the contributors. You can use the following code as a template:

<div id="contributors" data-githuburl="https://github.com/username/repo" data-type="grid" data-imgprofile="true" data-link="true"></div>

<script src="https://bashamega.github.io/scripts/cdn/libs/js/contributingjs/index.js"></script>

Replace "https://github.com/username/repo" with the URL of the GitHub repository you want to fetch contributors from. The attributes data-type, data-imgprofile, and data-link control the display and behavior of the contributors' list.

JavaScript API
The GitHub Contributors library offers a JavaScript API that allows you to programmatically fetch and use contributor data. You can use the following function to fetch contributor data:


const contributors = GITHUBFETCH("https://github.com/username/repo");
Replace "https://github.com/username/repo" with the URL of the GitHub repository.

Display Modes

Grid Mode

Grid mode displays contributors' avatars and usernames in a grid layout. Each contributor container is clickable and opens the contributor's GitHub profile in a new tab.

Slideshow Mode

Slideshow mode presents contributors' avatars and usernames in a slideshow format. The slideshow automatically transitions between contributors at a defined interval. Navigation dots allow manual selection of contributors.

List Mode

List mode shows contributors' avatars and usernames in a vertical list. Each contributor container is clickable and opens the contributor's GitHub profile in a new tab.

Error Handling

The library incorporates error handling to display an error message in case of issues with fetching or displaying contributors' data.

Conclusion

The GitHub Contributors JavaScript library simplifies the process of fetching and displaying contributors' data from GitHub repositories. It offers multiple display modes and customization options, making it easy to integrate contributors' information into your website. Just remember to include the library script and configure the container element attributes according to your needs.

Mark down

Adam Naji — Tue, 18 Jul 2023 05:38:37 +0000

what is MD?

Markdown was invented by John Gruber, a well-known writer and software developer, in collaboration with Aaron Swartz, an American computer programmer, writer, and internet activist. The creation of Markdown can be traced back to 2004 when Gruber and Swartz developed the markup language to simplify the process of writing and formatting content for the web.
Over time, Markdown gained popularity among developers, bloggers, and writers due to its straightforward and intuitive syntax. It became a widely adopted standard for creating content on various platforms, including websites, blogs, and documentation repositories like GitHub.
Read More

Why is MD important?

Markdown is important for several reasons, as it addresses various needs and concerns when it comes to document creation, especially in the digital world. Some key reasons for its importance include:

Simplicity and Readability: Markdown uses a straightforward syntax that is easy to read and write. It allows users to focus on the content rather than the formatting, making it accessible to both technical and non-technical users.
Platform Agnostic: Markdown documents can be opened and viewed on virtually any device and platform. It's a plain-text format that doesn't rely on proprietary software, ensuring broad compatibility and portability.
Web Compatibility: Markdown was initially designed for the web, and it is well-suited for creating content on websites, blogs, and forums. It can be easily converted to HTML, the language of the web, without any loss of information.
Version Control and Collaboration: Markdown files are easy to track and manage in version control systems like Git. Its simplicity facilitates collaboration among developers, writers, and other team members.
Documentation and Note-taking: Markdown is widely used for creating technical documentation, README files, and project wikis. It's also favored by many for personal note-taking due to its ease of use and organization.
Focus on Content: As Markdown separates content from formatting concerns, writers can concentrate on the actual content without getting distracted by complex formatting options.
Speed and Efficiency: Since writing in Markdown involves minimal formatting tags, it allows for faster writing and editing compared to traditional word processing formats.
Consistency and Standardization: Markdown follows a set of rules and conventions, promoting consistency in document structure across different files.
Language Agnostic: Markdown is not tied to any specific programming language or technology, making it widely applicable across various fields and disciplines.
Integration with Tools: Numerous tools and platforms support Markdown, such as text editors, content management systems, static site generators, and note-taking apps, making it highly versatile and widely adopted.
Accessibility: Its simplicity and compatibility with plain text make Markdown documents accessible to people with disabilities who may use specialized tools to access information.

In summary, Markdown's simplicity, versatility, and wide-ranging compatibility have contributed to its importance and popularity as a preferred format for content creation, documentation, and collaboration in the digital age.

Quick Options

Make a heading Input:

# Hello world

Output:

Hello world

Hyperlink some text Input:

[Google](https://google.com)

Output:

Google

Create a bullet point list Input:

- Apple
- Banana

Output:

Apple

Banana

Check list Input:

 - [ ] Coding
 - [ ] Teaching
 - [ ] Studying

Output:

[ ] Coding
- [ ] Teaching
- [ ] Studying

Insert an image Input:

 ![Beauty of nature](https://jooinn.com/images/beauty-of-nature-24.jpg)

Output:

Make a Table Input:

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Item 1   | Item 2   | Item 3   |
| Item A   | Item B   | Item C   |
| Item X   | Item Y   | Item Z   |

Output:
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Item 1 | Item 2 | Item 3 |
| Item A | Item B | Item C |
| Item X | Item Y | Item Z |

Make the text bold Input:

**strong text**

Output:

strong text

Make the text italic Input:

*Italic text*

Output:

Italic text

How to get all the contributors in a GitHub repository?

Adam Naji — Mon, 17 Jul 2023 16:57:20 +0000

Introduction

Hello:)
Today, we will see how to get all the contributors in a GitHub repository.
We will be using JavaScript to fetch the data, from the GitHub api.

What is the GitHub Api?

The GitHub API is a way to interact with GitHub programmatically. You can use the GitHub API to create integrations, retrieve data, and automate your workflows. There are two types of GitHub APIs: a REST API and a GraphQL API. The REST API uses HTTP methods and paths to access GitHub resources, while the GraphQL API uses queries and mutations to manipulate GitHub data. You can use GitHub CLI, curl, the official Octokit libraries, or third-party libraries to make requests to either API. For more information, you can check out the following links:

GitHub REST API documentation: This is the official documentation for the GitHub REST API. It provides reference information, guides, and examples for using the REST API.
Getting started with the REST API: This is a guide that shows you how to use the GitHub REST API using GitHub CLI, JavaScript, or curl. It covers topics such as authentication, parameters, pagination, and scripting.
About GitHub's APIs: This is an overview of the GitHub APIs, including the differences and similarities between the REST API and the GraphQL API. It also explains how to use GitHub CLI, curl, Octokit, and third-party libraries with the APIs.

How to fetch the contributors

All the GitHub APIs are stored at https://api.github.com/.
So in order to fetch it you need to fetch the api from GitHub.
So, the api for GitHub contributors is https://api.github.com/repos/{Username}/{repo_name}/contributors

It will return the date in json format.
So, you can use fetch like this

const response = await fetch("https://api.github.com/repos/bashamega/webdevtools/contributors");
const data = await response.json();

then the data variable will be equal to all the contributers in json format like this:

[
  {
    "login": "Bashamega",
    "id": 110662505,
    "node_id": "U_kgDOBpiTaQ",
    "avatar_url": "https://avatars.githubusercontent.com/u/110662505?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/Bashamega",
    "html_url": "https://github.com/Bashamega",
    "followers_url": "https://api.github.com/users/Bashamega/followers",
    "following_url": "https://api.github.com/users/Bashamega/following{/other_user}",
    "gists_url": "https://api.github.com/users/Bashamega/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/Bashamega/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/Bashamega/subscriptions",
    "organizations_url": "https://api.github.com/users/Bashamega/orgs",
    "repos_url": "https://api.github.com/users/Bashamega/repos",
    "events_url": "https://api.github.com/users/Bashamega/events{/privacy}",
    "received_events_url": "https://api.github.com/users/Bashamega/received_events",
    "type": "User",
    "site_admin": false,
    "contributions": 42
  }]

What are the meaning of these names?

Key	Definition
login	The username of the GitHub user.
id	The unique ID associated with the GitHub user..
node_id	A unique identifier for the user in the GitHub GraphQL API.
avatar_url	The URL of the user's avatar (profile picture).
gravatar_id	The Gravatar ID of the user's avatar. Gravatar is a service for providing globally recognized avatars. In this case, it is an empty string.
url	The URL to access the user's details via the GitHub API.
html_url	The URL to view the user's profile on GitHub in a web browser.
followers_url	The URL to access the list of followers for the user via the GitHub API.
following_url	The URL to access the list of users the current user is following via the GitHub API."
gists_url	The URL to access the list of gists (code snippets) associated with the user via the GitHub API."
starred_url	The URL to access the list of repositories starred by the user via the GitHub API.
subscriptions_url	The URL to access the list of repositories the user is subscribed to via the GitHub API.
organizations_url	The URL to access the list of organizations the user is associated with via the GitHub API.
repos_url	The URL to access the list of repositories owned by the user via the GitHub API.
events_url	The URL to access the list of events associated with the user via the GitHub API
received_events_url	The URL to access the list of events received by the user via the GitHub API."
type	The type of user. In this case, it is "User" which indicates a regular GitHub user.
site_admin	A boolean value that indicates whether the user is a site administrator or not.
contributions	The number of contributions made by the user (e.g., commits, pull requests) to repositories on GitHub.

How to set up vs code extension development files in less than 5 minutes?

Adam Naji — Wed, 19 Apr 2023 10:04:21 +0000

It is very simple to create them.
Following these step-by-step instructions

Install Node Js
Create a new file and open it in the terminal.
Type this command:

npm install -g yo generator-code

Type this command after installing it yo code
You will need to fill out the form about the extension

When you are done following these steps you are ready start coding your extension.

How to get the Last modification date of a file in python?

Adam Naji — Sun, 09 Apr 2023 05:10:22 +0000

It is very easy to get it

import os
print("Last modification" + time.ctime(os.path.getmtime(file_dr)

How to get the date created of a file in python?

Adam Naji — Sun, 09 Apr 2023 05:06:55 +0000

You can easily get it by this following code

import os
print("Date created" + time.ctime(os.path.getctime(file_dr)))

How to get the size a file or folder in bytes

Adam Naji — Sun, 09 Apr 2023 05:01:57 +0000

It is extremely easy to get the size of a file in python.

import os
if os.path.isdir(file_dr):
   size = str(get_size(file_dr))

else:

   size = str(os.path.getsize(file_dr))
print(size)

How to get the type of a file or folder in python

Adam Naji — Sun, 09 Apr 2023 04:58:14 +0000

Hey:)
It is very easy to get the file type using os
you can get it by the following code snippet

import os
if os.path.isdir(file_dr):
   file = "folder"
else:
   file_ = name.split(".")
   file = repr(file_[-1])
print(file")

DEV Community: Adam Naji

How I Connected MDN Documentation to TypeScript's DOM APIs

What is the TypeScript DOM generator?

Falling into the web standards world

The documentation problem

Building the documentation generator

The pull request journey

The merge

The unexpected surprise

What I learned

Read the code behind the tools you use

Specifications matter

Small contributions can turn into big opportunities

Open source is collaboration

Special Thanks

How I Turned an Arabic Word List into an Automated YouTube Channel

🚀 Join the WebDevTools Revolution! 🌐

How to keep your tokens secret?

Adding it to your project

Step 1

Step 1

Step 3

Uploading it to Github(optional)

Making sure that the .env is not on github

Uploading the files

Adding the secret

GitHub Contributors JavaScript Library Documentation

Grid Mode

Slideshow Mode

List Mode

Error Handling

Conclusion

Mark down

what is MD?

Why is MD important?

Quick Options

Hello world

How to get all the contributors in a GitHub repository?

Introduction

What is the GitHub Api?

How to fetch the contributors

What are the meaning of these names?

How to set up vs code extension development files in less than 5 minutes?

How to get the Last modification date of a file in python?

How to get the date created of a file in python?

How to get the size a file or folder in bytes

How to get the type of a file or folder in python

Making sure that the `.env` is not on github