DEV Community: Mahmoud Elmahdi

I built a Chrome extension to pin GitHub items — here’s why and how it helps

Mahmoud Elmahdi — Sun, 20 Apr 2025 10:20:42 +0000

Hey Devs! 👋

I recently built a small Chrome extension called GithubPin to solve a personal annoyance: keeping track of GitHub repos, issues, pull requests, and projects that I’m actively working on.

Bookmarks? Too messy. GitHub notifications? Not enough control.
So I thought — what if I could just pin important GitHub items right from the page and get back to them later with zero fuss?

💡 What GithubPin does:
Adds a pin button directly to GitHub pages (repos, issues, PRs, and project boards)
Saves pinned items.
Displays everything in a clean, GitHub-styled
Organizes items by type and shows useful info like labels, status, etc.
Works silently in the background — no login, no setup needed
It’s a lightweight extension, built with a content script.

🤖 Tech Stack:
TypeScript for scripts and logic
React + CSS
Chrome Extensions API (storage, tabs, activeTab)

🔗 Try it out:
👉 https://chromewebstore.google.com/detail/githubpin/hfedkfpmcmchjllbkhcaklaecghkmlab

I’d love to hear your feedback, ideas, or wishlist for future features (folders? GitHub Enterprise support?).

Thanks for reading — happy pinning!

JavaScript AbortController - 3 use cases

Mahmoud Elmahdi — Wed, 09 Oct 2024 22:39:00 +0000

From chaos to order: How to plan projects like a Pro and deliver results

Mahmoud Elmahdi — Fri, 16 Jun 2023 19:54:12 +0000

Proven strategies for crushing deadlines and what to avoid!

Are you tired of feeling overwhelmed by deadlines, frustrated with chaotic workflows, and constantly playing catch-up? If so, you’ve come to the right place.

In this blog post, we’re going to unveil the secrets of successful project planning that will revolutionize your approach and skyrocket your productivity. Whether you’re a seasoned project manager or a driven professional looking to enhance your organizational skills, this is your ultimate guide to transforming your projects from stressful endeavors to seamless triumphs.

We’ll delve into proven strategies and expert insights that will empower you to take control of your projects, stay ahead of schedule, and deliver exceptional results. From creating a well-defined project scope to mastering resource allocation and risk management, we’ve got you covered.

So, if you’re ready to embark on a journey towards project planning excellence, buckle up and let’s dive in. Say goodbye to missed deadlines, stress-inducing chaos, and hello to a new era of efficiency and success. Get ready to unlock your full potential and propel your projects to new heights. Let’s get started!

Writing a successful project plan involves several key steps. Here’s a general outline to help you get started:

Define the project scope

Clearly identify the project’s objectives, deliverables, and boundaries. Determine what is within the project’s scope and what is not.

Conduct a thorough project analysis

Gather all the relevant information about the project, including its goals, stakeholders, resources, constraints, and risks. Assess the feasibility and potential impact of the project.

Set specific and measurable goals

Establish clear and realistic goals that align with the project’s objectives. Goals should be specific, measurable, achievable, relevant, and time-bound (SMART).

Create a work breakdown structure (WBS)

Divide the project into manageable tasks and subtasks. Organize these tasks in a hierarchical structure to provide a clear understanding of the project’s components and their dependencies.

Define project milestones

Identify significant points or events in the project timeline that mark the completion of major deliverables or the achievement of key objectives. Milestones help track progress and provide a sense of accomplishment.

Develop a project schedule

Create a timeline that outlines when each task and milestone should be completed. Consider dependencies, resource availability, and any external constraints. Use project management tools or software to assist in scheduling and resource allocation.

Allocate resources

Identify and assign the necessary resources, including personnel, equipment, and materials, to each task. Ensure that resources are available when needed and that they have the required skills and expertise.

Identify and manage risks

Assess potential risks and uncertainties that may impact the project’s success. Develop a risk management plan that includes strategies for mitigating, avoiding, or accepting risks. Continuously monitor and update the plan throughout the project lifecycle.

Create a communication plan

Determine how project information will be shared and disseminated among stakeholders. Define the communication channels, frequency, and format of project updates and reporting. Foster open communication to ensure everyone is informed and aligned.

Establish a project budget

Estimate the costs associated with the project, including labor, materials, equipment, and any other relevant expenses. Develop a budget that is realistic and aligned with the available resources. Monitor and control expenses throughout the project.

Build a project team

Assemble a team with the necessary skills and expertise to execute the project. Define roles and responsibilities, and foster collaboration and accountability among team members. Clearly communicate expectations and provide the necessary support and guidance.

Monitor and control progress

Continuously track the project’s progress against the established schedule, milestones, and goals. Use progress reports, key performance indicators (KPIs), and project management techniques to monitor and control the project. Take corrective actions if deviations occur.

Review and adapt the plan

Regularly review and update the project plan as needed. As the project progresses, new information and insights may emerge that require adjustments to the plan. Be flexible and adaptable to changes while keeping the project’s objectives in focus.

When planning a project, it’s important to be aware of potential pitfalls and avoid common mistakes. Here are some things to avoid when creating a project plan 🙅

Insufficient planning

Rushing through the planning phase or neglecting to thoroughly analyze the project requirements and constraints can lead to inaccurate estimates, missed deadlines, and project failure. Take the time to gather all the necessary information and plan the project comprehensively.

Lack of stakeholder involvement

Failing to involve key stakeholders from the beginning can result in misalignment, misunderstandings, and resistance to the project. Engage stakeholders early on, gather their input, and address their concerns throughout the planning process.

Unrealistic goals and expectations

Setting overly ambitious or vague goals can set the project up for failure. Ensure that goals are realistic, achievable, and aligned with the project’s scope and resources. Clearly communicate the project’s limitations to manage expectations effectively.

Inadequate risk management

Neglecting to identify and address potential risks can lead to project delays, cost overruns, and quality issues. Develop a comprehensive risk management plan, including risk identification, assessment, mitigation strategies, and contingency plans.

Poorly defined roles and responsibilities

Ambiguity or confusion about roles and responsibilities can result in inefficiencies, duplication of efforts, and lack of accountability. Clearly define the roles and responsibilities of each team member and communicate them effectively.

Lack of communication and collaboration

Ineffective communication can lead to misunderstandings, delays, and poor decision-making. Establish a communication plan that outlines the channels, frequency, and methods of communication among team members and stakeholders. Foster open and transparent communication throughout the project.

Inadequate resource allocation

Failing to allocate resources effectively can lead to resource shortages, bottlenecks, and compromised quality. Ensure that resources, including personnel, equipment, and materials, are adequately allocated and available when needed.

Scope creep

Allowing uncontrolled changes and additions to the project scope can disrupt the project timeline, increase costs, and strain resources. Clearly define the project scope and diligently manage any changes through a formal change control process.

Poor risk assessment and mitigation

Underestimating or ignoring potential risks can lead to project failures. Conduct a thorough risk assessment, identify potential risks, and develop proactive mitigation strategies to address them.

Inadequate monitoring and control

Failing to monitor project progress and take corrective actions can result in deviations from the plan and missed deadlines. Regularly track and evaluate project performance against the established metrics, milestones, and goals. Take timely corrective actions to keep the project on track.

Autofill plugin for Figma

Mahmoud Elmahdi — Sat, 24 Dec 2022 15:10:31 +0000

I recently built Autofill Figma Plugin. It fills "Text" nodes with data automatically using dynamic variables.

See how it works

Data categories and dynamic variables

Name - generate people's names and titles
Internet - generate internet related entries
Finance
Animals
Addresses
...and more

List of all available dynamic variables can be found here.

React Utility Components

Mahmoud Elmahdi — Mon, 05 Dec 2022 19:20:42 +0000

Reusable react components to maximize your coding efficiency.

Install

npm i @melmahdi/reactuc

Components

If
Image
Iterate
Table

Usage

If

Conditional rendering component

import { If } from "@melmahdi/reactuc";

<If condition={condition: 1 | 0} otherwise={otherwise: ReactNode}>
  ...
</If>

Image

Component to handle broken images

import { Image } from "@melmahdi/reactuc";

<Image fallback={...} src="..." alt="..." />

Iterate

Component to handle iterations.

Display list of paragraph (with html tag):

import { Iterate } from '@melmahdi/reactuc';

<Iterate data={['...', '...', '...']} element="p" />;

Display list of objects (with component):

import { Iterate } from "@melmahdi/reactuc";

const cards = [
  { id: '75ebc192', title: 'Lira Fresh Optimization' },
  ...
];

<Iterate data={users} element={UserComponent} />;

Table

Table component

import { Table } from "@melmahdi/reactuc";

const tableData = {
  head: ['First', <button type="button">Action</button>],
  body: [
    ['One', 'Two'],
    ...,
  ]
};

<Table {...data} />

Software development and programming tools

Mahmoud Elmahdi — Thu, 03 Nov 2022 08:48:27 +0000

In the previous post I described how the Internet works.

In this post we'll see what are the most essential tools for programmers.

Code Editors

Writing computer code is basically a series of textual instructions for a computer to execute. This means that we can write code - in its simplest form - anywhere text can be captured. This includes a text editor, a document app, etc. But that does not mean that such a tool is the best place or the best way to write code.

Since writing code can be more complex than just writing text, a Code Editor is a specialized environment with advanced options for this task. In other words, a Code Editor is a text editor with sophisticated built-in capabilities and special features that make editing code easier and faster.

A Code Editor is one of the most essential tools for programmers. It was developed with the express purpose of making code editing more efficient and easier. A text editor is comparable to a Code Editor, but a Code Editor offers much more features.

Integrated Development Environment (IDE)

An Integrated Development Environment (IDE) is a software application that helps programmers develop software code efficiently. IDE is designed to combine all aspects of programming into a single application.

IDEs come with a wide range of features. In their most basic form, they always contain at least one of the following components:

Code Editor
Compiler or Interpreter: Compilers are responsible for converting source code that is written in a language that is readable and writable by humans into a format that computers can run.
Debugger
Syntax highlighter
Graphical User Interface (GUI)
Build automation tools

Nowadays, most Code Editors offer more or less the same features as IDEs with additional add-ons (or out of the box).

Popular Code Editors and IDE

Microsoft Visual Studio Code (Free)
JetBrains IDEs (Paid)

The Internet

Mahmoud Elmahdi — Thu, 03 Nov 2022 08:39:59 +0000

Getting Started with the Web is a post series on getting started with web development that will help you understand and learn the basic parts of the World Wide Web to create your own web pages.

The Internet

How does the Internet work
Hypertext Transfer Protocol (HTTP)
Domain
How the web works

How the Internet works

The Internet is a collection of individual computers (and computer networks in businesses, schools, and organizations) that are generally all connected to each other, mainly through the network. The connections between computers are a mixture of old-fashioned copper cables, fiber-optic cables (which send messages in pulses of light), wireless radio connections (which transmit information via radio waves), and satellites.

The way the Internet functions

There are two important concepts in how the Internet works: packets and protocols.

Packets: In networks, a packet is a formatted unit of data transmitted over a network connection. It consists of control information and user data (payload).

Control information includes source and destination addresses. The user data (payload) is the transmitted content, e.g. text, images or media files (audio, video).

When the packets arrive at their destination (computer), they are reassembled into the original data. This process is called packet switching

Protocols: The Internet Protocol (IP) is simply the addressing system of the Internet. All connected computers on the Internet are identified by an Internet Protocol
(IP) address.

A protocol is a set of rules that control the format of data sent over the Internet.

An IP address is a sequence of numbers separated by periods. IP addresses are expressed as a set of four numbers. Each number in this set can range from 0 to 255.

IP address examples

150.107.195.151
136.237.184.147
253.196.6.213
8.57.99.168
225.244.249.141
196.33.116.61

Web hosting

Web hosting is a service that allows organizations and individuals to publish a website on the Internet. A web host, or web hosting service provider, is a company that provides the technologies and services necessary for the website to be displayed on the Internet. Websites are hosted, or stored, on special computers called servers, or web servers.

Web server

Simply put, a web server is a computer that stores, processes, and delivers the files of a website to the web browsers.

Web servers consist of hardware and software that use the Hypertext Transfer Protocol (HTTP) to respond to requests made by web users browser

Hypertext Transfer Protocol (HTTP)

The Hypertext Transfer Protocol (HTTP) is a set of rules that describe how information is exchanged over a network that allows a web client (browser) and web server to communicate with each other.

Web clients (browsers) and web servers communicate by exchanging individual messages; The messages sent by a web client (browser) are called requests and the messages sent by the web server (is response) are called responses

Domain

The Domain Name System (DNS) is the yellow pages of the Internet. People access information online through domain names. Web clients (browsers) interact using Internet Protocol (IP) addresses.

A domain name can be any combination of letters and numbers, and it can be used in combination with the various domain name extensions, such as .com, .net, .co.uk and others.

Domain Name System (DNS)

A decentralized database that converts the domain name (e.g. google.com) into a corresponding computer-friendly IP address (e.g. 216.58.209.14).

The Domain Name System (DNS) translates domain names into IP addresses so that browsers can load Internet (web) resources.

Each device on the Internet is assigned an IP address, and this address is necessary to find the corresponding Internet device — just as a street address is used to find a particular house.

How the web works

When you type or click the Uniform Resource Locator (URL) of a website into a client, a request is sent to the Internet Service Provider (IPS), which connects the web browser (client) to the server. The IPS then communicates with the Domain Name System (DNS) and checks the IP address of the server hosting the website. After it receives the IP address of the destination server, it sends it to the web browser, and the client receives the provided resources.

Operators in JavaScript

Mahmoud Elmahdi — Mon, 15 Jun 2020 20:06:30 +0000

JavaScript Operators

Topics covered in this video:

Types of operators in JavaScript
Arithmetic operators
Assignment operators
Comparison operators
Relational operators
Logical operators
Conditional (ternary) operator
typeof operator

📄 Check out the Destructuring in JavaScript article

▶ Course Playlist

Subscribe for more videos, and stay tuned for updates!

JavaScript Data Types

Mahmoud Elmahdi — Wed, 27 May 2020 01:32:10 +0000

JavaScript data types and data structures

Topics covered in this video:

Overview of data types
Type system in programming languages
High-level overview at the difference between dynamically typed languages and statically typed languages
Data types and data structures
Primitive data types: String, Number, Boolean, Undefined, Null, BigInt and Symbol
Non-Primitive data types: referred to collectively as Objects

📄 Check out the JavaScript String Methods article

▶ Course Playlist

Subscribe for more videos, and stay tuned for updates!

JavaScript const

Mahmoud Elmahdi — Sat, 23 May 2020 08:54:53 +0000

Topics covered in this video:

What is const (constants)?
What they are used for?
The let keyword behavior vs the const keyword behavior with an example
Access const object's value and change its properties

Stay tuned for updates!

JavaScript Variables

Mahmoud Elmahdi — Fri, 22 May 2020 11:39:13 +0000

Check out my recent video about Variables in JavaScript.

Topics I covered in this video:

What is variable?
Variables in JavaScript
Variable declarations
Declaring variables
...and variable scope

Stay tuned for updated!

Learn JavaScript FREE Course

Mahmoud Elmahdi — Thu, 21 May 2020 22:00:25 +0000

I've just published 🎉🥳 the first two videos in my first online course ever, and man am so excited about it!

It tooks a lots of efforts and learning curves on the go to get my head around, mapping the course out, and play around video/audio recording and editing.

Course overview

Here'a an overview about the course and what to expect from it

Course content

The Learn JavaScript Playlist is going to be updated regularly, so stay tuned for up coming lectures/videos. Make sure to Subscribe!

Feedback are always welcome!