DEV Community: Abdurrahman Rajab

Web UX: Show meaningful errors to the users

Abdurrahman Rajab — Tue, 08 Oct 2024 23:02:03 +0000

Having a user-driven and user-friendly website can be tricky sometimes since it would let the whole development team spend more time on things that do not add value to functionality and core business. Yet, it can help the user in the short term and add value in the long term. Project managers who are strict with their deadlines could underestimate the value added in the long term. I am unsure if this is true for Apple website teams, yet they are missing some great user experience.

Recently, I tried to publish an app to the app store from the Apple website, but I faced an issue with my contact information. Even though I provided the correct information in multiple formats, I still needed to accept them and give a meaningful message to the user.

In my experience, the website always gives them an error for providing the wrong phone number, which reads as if this field is invalid. Here is the general message:

Here is the message from the field input for itself:

I had this issue even when I tried with the two zeros at the beginning, even if I did not add the country code. It always gave me the same error message, with no direction on how to fix that, what to do, or even what was wrong!

Initially, I thought it was an issue with the server, so I decided to try again after a few hours. I checked the health status of Apple products, which did not have an issue. After being tired, I decided to debug the problem as a software engineer and check what was sent through the network and what the response was, which led to the "Aha moment" for me.
Aha! moment, Apple needs to provide the correct message.
When I checked the network messages, I learned they provided the correct details and guide from the backend, yet the website does not provide them.

Here is the request payload:

The response:

{
    "errors": [
        {
            "id": "SOME-GUID",
            "status": "409",
            "code": "ENTITY_ERROR.ATTRIBUTE.INVALID",
            "title": "An attribute value is invalid."
            "detail": "The phone number must be in a valid format. Preface the phone number with ‘+’ followed by the country code (for example, +44 844 209 0611)",
            "source": {
                "pointer": "/data/attributes/contactPhone"
            }
        }
    ]
}

By looking at this and reading the details, I could understand that the issue was in number format, which made my life easier.

A final thought:

As developers, we should know and understand the users' issues to write great UI and excellent UX for them. When we ignore writing the correct message and show the users how to solve their issues by themselves, we put a lot of load on the users and our support team, and we might lose some users. This means a loss of revenue in the long run, which businesses do not like.

Coding a chrome extension in 11 hours!

Abdurrahman Rajab — Mon, 05 Feb 2024 13:30:00 +0000

Last week, I decided to develop a Chrome extension. My primary motivation was to build an extension from scratch to improve my knowledge and fill some gaps. I had the knowledge to work on extensions due to my contribution to open-source projects like OpenSauced and Refined-GitHub. My only issue was that I needed to learn how to make an extension from scratch. Not knowing how to make a Chrome extension from scratch ignited the fire of this journey! In this blog, I am sharing the process I had during that week to build a Chrome extension and learn the technology behind it.

My initial plan was simple: have a continuous system that I would follow during the next few days. I did not know what I would do, but I decided to have at least one hour a day for this project. I should not pass this one hour no matter what will happen. This rule was the best decision I had, leading me to even code at midnight when no one was there.

Besides that, I decided to livestream my experience, which was helpful to have a feeling of being an accountability partner and building the accountability system that I needed, even though I would expect no one to watch it. Yet, to my surprise, I gained a friend through that stream and had a few people joining it during that week.

The blog structure

In this blog, I am writing a coverage of the engineering and thought process of every day I worked on this extension. After covering the engineering process as a newbie, I write a few thoughts about the experience and how I would have done that differently based on the knowledge I gained during this journey. At the end of the paragraphs, I am adding two links:

one for the live stream related to that day
The other link is for the version of the emoji extension on GitHub.

The skills

To build a Chrome extension, you need to know about web development in general. Web development basics mean JavaScript, HTML, CSS, and Web APIs. Besides that, you will need to learn the extension API. If you have the former, it's straightforward to acquire the latter based on your experience and learn it while building your Chrome extension, which I have done during this journey.

The idea:

I don't know how the idea crossed my mind. I believe it's related to my frequent use of GitHub and improving writing skills over time, like using emojis on issue writing and seeing the impact of emoji-full issues, which made me think about the value of emojis and how to use them in other places. GitHub shows emojis to select from when you write a colon (:), and it allows you to choose from them. Some other companies adopted this, but I did not find it in Dev.to or Twitter, which is why I thought of working on it. It mostly came when I wanted to update an article I published on dev.to with some emojis but could not add them effortlessly.

GitHub In-text emoji picker:

Day 1 (90 minutes): Getting started

At this point, I knew the idea but needed to figure out how to start. Therefore, I chose the official documentation to follow and see what I could do from there. I followed the official documentation because it would make the engineering and coding easier for you and let you know your blind spots and how to cover them later.

Initially, I just used one of the tutorials that Google provided. I chose that tutorial specifically since it's the closest to my end project. The first step was to read the tutorial without applying it to understand the result and a few concepts. Then, I used that tutorial on my machine and ran it. The reason to apply the tutorial first is to make sure that It's working and nothing is broken.

After ensuring everything worked well, I started working on a simple version of the extension. In this version, I wanted to ensure that I was adding an emoji to the text area from the extension. The emoji was predefined, and I had no complex logic here. Simplicity ensures I have the extension working well with the minimum version.

After getting that logic working, I next wanted a menu to select the emojis from it. I started with a simple menu that I made in HTML, tested it on a page, and then used that as my reference to the webpage. I only wanted to see the menu on screen without any expectations. After getting that to work, I used event listeners to get the text from the menu and write it in the text area to see if it worked. With this, I ended the day after adding the code to GitHub and uploading it there.

With this development, I was sure of three things about the extension:

It's working,
It adds emojis to the text area.
I can see the static emoji menu
It's getting the emojis from the menu.

With that, all I felt was that the extension was almost ready. I needed minor improvements after that, yet my expectations needed to be corrected.

Here is the result that I got from day 1:

Reflection:

Looking back at the code I have written and the logic I had, I am using the default HTML tags inside my CSS file to customize my emoji menu. This approach could be better since it would change all the elements on the page and have a weird view. Here is an example from Dev.to

Besides that, I am using a background script to inject the CSS file and the JS code, which I could have done directly by using content scripts instead of injecting it with a background file. The content scripts file will allow you to inject the code immediately without the need to do that manually.

Day 2 (80 minutes): exploring emoji search APIs

After my development on day 1, I was ready to consume an API to use it in the extension. I used something available online instead of working on my API backend project to save time. If an Emoji API provider were unavailable, I would have needed to work on that, too! I started by quickly searching on such an API, then checked the options and used one: https://emoji-api.com/. The reasons to use that API are:

It's free,
It has a search feature.
Simple and well-documented.

I used the API and explored it through Postman, which makes things easier than just going through, writing a related code, and using it. Using Postman helps me understand what's happening in the API endpoints without struggling to write the code.

After ensuring I had the access key to the API and it was working, I worked on adding this to the extension. The basic idea I thought about was to have a search bar in the HTML menu and use it to search for emojis. The reason here is that I wanted to ensure that the API was working well, and I wanted to use something other than a regex parser from the text area. Narrowing down the development scope helps minimize my engineering land and make it focused and precise.

At this point, I made a simple HTML page to test the design of the menu that I would like to have and see the results. Since the Chrome extensions are another web page, I applied the logic on this page to transfer my knowledge to the extension code. The HTML page did not work with the API due to the CORS policy; for that reason, I decided to make minor tweaks to improve the UI of the menu.

Reflection:

If I redo this, I would use a JavaScript library with emojis instead of looking for an API. This would make it better for the user and keep the extension independent from third-party APIs and from the internet.

Day 3 (105 Minutes): implementing the emoji search API

On this day, I started by having my test page. The test page will help me check the extension on isolation from other websites. The reason was that when I used the extension with Dev.to test on the previous day, there was an issue in triggering Dev.to own events and publishing the comments by mistake. Having my test page would prevent such problems.

Today, I discovered that I could use the API without getting a CORS by utilizing the service workers of the Chrome extension. I implemented that logic and fetched the emojis from the API, and at the same time, I had minimal parsing logic to get the colons from the text area and then use that. I used the previous logic as an initial scaffold to improve the work.

As for the parsing, I have used ChatGPT to ask for a way to parse the text after the colons, which gave me a good result, and I have used it in the project after minor tweaking.

After getting the parsing and the results I wanted, I made minor improvements to the code while getting the results from the API.

Day 4 (80 minutes): UX improvements

On this day, I improved the previous minor errors, like the search, the parsing, and the multiple menu lists injected into the code, mainly improving the previous logic and polishing things. One of the significant improvements I made today was replacing the text used for searching with the related emojis.

The main improvement here was exploring the option of having the emoji menu under the written text; this would allow a better UX/UI experience for the user. The initial experiments with ChatGPT help did not work and stopped at this point.

Day 5 (60 minutes): Minor Fixes and exploring

On this day, I started fixing the names in the extension using RegEx. I decided to use the https://regexr.com/ website and write my own, then compare it with what ChatGPT would show me. Then, I improved the event handling for the menu when someone clicks on the emoji or the text itself. Ultimately, I worked on the CSS to improve the visibility of the emoji names in the text provided.

The next challenge was adding the menu on the place of the text instead of letting it float randomly. This challenge allowed me to research and see what options we could use. I found two exciting resources: one was by Dan Dascalescu, and the other was by Amjad Masaad, the founder of Replit. I read their codes and decided to use them the next day.

In the remaining time, I just went to fix a minor issue in the text parsing, which was related to not detecting the spaces after the command and showing the menu even after having a space. With that, I called it a day and just went to work.

Day 6 (120 minutes): Adding Menu Under Cursor

Today, I just added the emoji menu after the cursor, which was a straightforward experience by looking at Dan and Amjad's solutions. After getting the position of the menu correct and adding an improved version of the text parser, I get the latest text after the colons. I decided to search and see how to publish the Chrome extension to the Chrome store.

At this point, I decided to test the latest improvements that I had in the extension on Dev.to since I have been testing it on the test page that I created, I figured out that I need to improve my event handling in the extension and have it for the whole window instead of just adding one to each element. Then, I tried to use the extension on Twitter and found out that they used a div for everything they have in the UI, which is why the extension broke.

I ended the day by having the issues I needed to work on for the next day, enabling the extension on Twitter and pushing the extension to the market.

Day 7 (65 minutes): Publishing Day

Today, I went through the publishing process on Google Store, which was lengthy due to the legal parts and the requirements I needed to explain the extension's purpose to Google, the functions' purposes, etc.

After that, I started to discover Twitter and see what I could do to enable the extension on Twitter and run it on their website; this will be a great addition to the extension since it will allow the tech community on Twitter to use emojis more. The Twitter div logic was different, which made me go to a fully exploring and inspecting mode for the day to see what I could do to enable the extension on Twitter.

Day 8 (70 minutes): Handling Twitter

On Twitter, I faced an issue with the extension: not showing the extension on top of Twitter buttons. I have tried multiple options but am still trying to get what I wanted. I wrote a question on StackOverflow about the issue to get help from the community. At this point, I was unaware of HTML's stacking context logic. Still, I guessed the development: if I always had the extension attached to the body, it would never be hidden behind anything, making me have to refactor the code to run the add menu.

One of the things I did today was enable the extension to use elements that are not text areas and show the emoji menu even when you scroll the screen; this would make things stable for users. With that, I ended the day.

Future development:

With all of that, I still feel that the extension needs some improvement to be fully ready for a launch. This development would be:

Handling twitter logic,
Having a better UI
Replacing the emoji API with a JavaScript library
Moving to npm

Lessons:

From this experiment, I learned the value of having a semi-strict routine. Such a routine would help you to achieve more and gain a better experience. Besides that, I learned how to build a Chrome extension from scratch and what I can do in the future. I hope that you enjoyed the article.

If you want to try the chrome extension feel free to download it from this link.

Let me know in the comments if you have had such an experiment! and remember to follow me on Twitter.

Innovation lessons from GitHub Chat and GitHub Copilot Labs

Abdurrahman Rajab — Fri, 02 Feb 2024 07:58:00 +0000

In one of the recent blogs, I mentioned how Vercel can benefit from and adopt some techniques from GitHub Copilot Labs to improve its products.

In this article, I will explain GitHub Copilot Labs as an extension, mentioning its value and how companies can have a similar path for themselves. The main idea is to have a reference that talks about the extension and has it in the history since GitHub Next decided not to continue supporting it.

What is GitHub Copilot Labs?

GitHub Copilot Labs is a tool run by the GitHub Next team, the R&D team of GitHub, to figure out new paths and methods to enable developers to benefit from Copilot in a new way.

On the 15th of December, 2023, GitHub stopped supporting GitHub Copilot Labs and merged it into the GitHub Copilot chat. The merge will enable easier usage, but those who have not used Copilot Labs or knew about it would miss a priceless piece related to the technology development.

GitHub Copilot Labs started after GitHub Copilot as a research project for GitHub Next; they had a few tools with preset prompts that used an open chatbot to generate the related codes. One of the advantages they had was the integration with VS Code, which allowed for a great development experience. The presets clarified how to use Copilot in the pre-chatGPT area and how that would help developers.

An example of Copilot Labs is the code explanation, which you can ask to clarify the code and see the results in human-readable text. I will explain the features further in the next section:

The Design and how it works?

The design of the extension is pretty simple. The extension adds a sidebar to VsCode, allowing you to generate code based on the presets.

Those presets are:

Language Translation: this allows you to translate from one specific programming language to another.

Brushes: these are a few functions that would be helpful for coding, like adding types, improving readability, and adding documentation. Here is a video example by VS Code that explains the custom features.

Explain: to explain the code with preset explanation examples:

Test Generation: Looking at the options they provided, you will feel that it’s just a prompt engineering extension, which is correct based on their explanation in discussions and on the website. The innovation side of the extension was to enable the user to have a multiple option for a new tool that was not clear how to use since GitHub Next announced it in 2021.

Early adopters and innovation

With every innovation, you might need early adopters to explain it and get people excited to use it or even advocate for it. With GitHub Copilot Labs, the company had an opportunity to experience that at an early stage and gain insights about what is the most important for them to use. They collected stats from the extension on the most used features and, at the same time, were in a conversation with developers through discussions, beta, and alpha trials. The early conversations enabled them to find the direction they wanted to develop a tool to help developers.

The extension used to work by getting a selected text and writing the code based on the selections, which enabled more accurate data and results from having a general talk. With that collected data and insights, they integrated similar features to GitHub Chat and open-sourced the test generation functions.

GitHub Copilot Chat

GitHub Copilot Chat is the successor of GitHub Copilot Labs. Chat is more intuitive and functions similarly to the one experienced in the GitHub Copilot Labs, such as the code selection features, the test generation, etc. Another benefit is the ability to converse with the AI model. Chat Extension would make it easier for users to understand how to use it and benefit from the

If you are using GitHub Chat for the first time, you will notice the ability to have a conversation within the code editor, which feels like talking to an actual human. You can ask for code explanations or even fix your bugs. Here is a simple example:

Besides the conversation, you can use special functions in GitHub Copilot Chat as commands. This function is similar to the GitHub Copilot Labs functions, yet instead of having them through user interface buttons, you will have them as a conversation. Such development touches the new wave of LLM and provides a good user experience.

Another great thing in the Copilot Chat is the ability to add code with one button:

This button lets you insert the code immediately from the extension to the cursor position, making it easier than copy-pasting.

GitHub Copilot Labs Vs GitHub Chat

If we compare both products, we can notice that both rely on GitHub Copilot and OpenAI models. Replying on OpenAI models makes them similar in logic.

GitHub Copilot and GitHub Copilot chats are getting the file extension and name and then adding that information to the prompts they are sending to the GPT engine; with this, they make a better and more robust code generation.

The main difference is that GitHub Copilot Labs was used as an experiment before having a fully working product. The prompts to the OpenAI model were preset and defined by GitHub, and the program was not able to have an entire conversation or save the history. On the other hand, GitHub Copilot Chat has enabled the users to use their prompts with the conversation's history. This enablement gives the user more power to explore AI's potential and write creative prompts.

Lessons

By looking at the development of the GitHub Copilot Chat and GitHub Copilot Labs, we can notice the following:

GitHub had agile and made a few experiments to get the best for the market. They learned from those experiments and created products that help.
They have a different company for R&D, which aims to get products from 0 to 1. After that, they graduate the project with a different team, moving the product from 1 to 100, which means scaling the product to scale for the whole market.
Early adopters of new tools and technologies always have an advantage.
Other companies could have a similar path for their products. Going back to the V0.dev article, I believe that Vercel could have an extension that could create code from a selected file, understand the design system by analyzing the file structure and file names, and even provide a minified ready-to-work user interface first, then move that to a full product that runs on the more intuitive creative aspect.

In the end, the development in the AI world is going fast. We have had a product for two years, and seeing massive hype around it will only push us forward to find the best for humanity.

Finally, can you share if you have used any of those tools in the comments? And how do you see the future of developers' tools?

Enabling children in disastrous regions through technology

Abdurrahman Rajab — Tue, 30 Jan 2024 18:20:09 +0000

I was born in a culture that promotes humble behavior and values selflessness and altruism in human behavior. Valuing humility made it hard to talk about my skills or show off; I firmly believed that my work would speak for itself and should not mention charity work anywhere. With all that, sometimes sharing my charity work with the community is odd since it would create a personal conflict. This conflict makes me wonder what the primary goal of writing this is. Is it personal branding or a way to show the impact, motivate others to do good work, and show our humanity as screen (tech) people?

I prefer to think about the latter even though the former would happen. In this blog, I will share my recent volunteering experience with an NGO providing children leadership and tech education. I had a chance to go to the earthquake area and provide a robotic workshop to the affected children to show them good examples and role models and motivate them to impact the community through STEM and be good samaritans.

Earthquake impact

Even though the earthquake happened around a year ago yet, the impact is still visible in the community there. The people still live in containers, have no homes, buildings are about to crash, and roads are not fully repaired. With all of this, someone would ask, how would people continue living here? What can we do, and what is the impact on children?

Before jumping into the work we did with children, I would like to give a short introduction about the NGO I volunteered with. The Turkish NGO has the idea of fostering double-winged role models. Double-winged means competent and compassionate people simultaneously. As a human, if you are competent, you would use your skills for both bad and good, but to make sure that the competent people are using their skills for good, the NGO is adding a compassionate wing for people. It grows them through direct involvement in projects and activities and, simultaneously, by exposing them to leaders and role models in the industry.

After the earthquake, the NGO decided to funnel all of its efforts into supporting the earthquake-affected people, those who lost their homes and those who might have lost their families.

24 hours journey

Our trip started at 3 am and ended at almost 1 am the next day. The schedule included the flight from the city to the earthquake zone, the breakfast, and the road time. The earthquake destroyed the city airport, so we had to fly to another city and go to the zone by bus.

The images of the buildings you see on the road would tell you that the city has become a ghost city. It's similar to the cities you see in the movies, with destroyed buildings around the area. Only a few buildings are up. With this, a human would wonder how many people we have lost. How many Steve Jobs, Bill Gates, or even fathers who wanted to bring a gift to their daughters have been lost under these rubbles? At the same time, I wondered what results we would have with children and what impact we could have on them. Would we ignite their curiosity to improve in the future and be the scientists who would do the research and work to prevent such disasters in the future?

Antakya/Hatay/Turkey one year after earthquake - YouTube

youtube.com

When we arrived at the school, we talked about having our workshop; we had a pre-workshop time with the teachers and spoke about their experiences and the results they reached at their school. You would be shocked by how much they stayed strong after a disastrous situation like the earthquake; I still remember that the school manager said that they lost (either left the city or died) all of their students due to the earthquake, and the number dropped down from 800 to 150. Yet they decided to stay strong and build up the school again. By building up again, I mean getting the furniture, fixing the impacted walls, and even buying new classes. They could return to 720 students within a year, a huge milestone.

At the same time, we had a chance to introduce ourselves as a team. Thankfully, the volunteering team consisted of volunteers who had been in this situation before, volunteers who were studying in the USA, high school student volunteers, and even graduates who all came together to provide an educational journey for the students.

Tough questions at a young age

One of our volunteers had a great question, which he described as the next: We previously hosted such events and had struggles; I would like to know the readiness of the children joining our tech workshops. I once had a child who asked me, "I lost my dad during the earthquake. Are you here to teach me about technology? it's meaningless." This question previously broke my heart, and I wanted to know if we might get a similar reaction.

Such questions and reactions from the children are typical in such a situation. Imagine losing your hero in front of your eyes! Even worse, some people would have lost all of their families at once. Such a situation was challenging, and we needed to be ready for whatever reaction we got from the students.

Thankfully, the school managers affirmed that many children get over the situation and we might not have such questions in this workshop. After the introduction talk, we had a great breakfast from the host school. They introduced us to the local food of their region, which is similar to Syrian and Middle Eastern food. After that, we had a short time to review the workshop content and educational kit we were using to teach children, and then we had our workshop.

A Safe place for experimentation

During the workshop, we focused on two things.

Let the children think and explore
Let the children be free to make mistakes

The goal here is not the technology itself but the scientific and trial-error approach we have in science, which we tried to provide to children. This approach enables the children to wonder and ask questions about what we do, even lets them make mistakes, and helps them find the correct answers. Finally, we built a remote-controlled car with the children. That allowed the children to play and learn by exploring the educational kit!

While building the car, we had a chance to talk with children since the workshop population was two volunteers for every four children; this allowed room for a personal connection with children and asking them about their thoughts and ideas. Before working on the car, we had a short, interactive presentation with the children in which we asked them questions about vehicles, fossil-based energy, and clean energy in general. We had great answers from the children (they were in 5th and 6th grade). Some mentioned the value of clean energy on Earth, humans, and nature. Others mentioned the value of noise canceling from the electric car. The noise conversation leads to a conversation about how to help visually impaired people identify and notice the car. All of these conversations and insights would not be feasible if we did not create a trusting atmosphere between children and volunteers, and it enabled us to dig further to find the gems in the hearts of those children.

The volunteering impact

After the workshop, we had dinner and returned home. On our way back, we had an intimate talk with the team to discuss the day, mostly thinking about What went well, what we thought, how we felt, and how such an experiment impacted us.

With this, everyone from the volunteers shared their thoughts and discussed them with the team, a great exercise that helped us be vulnerable and close to each other and our feelings.

A few thoughts we had discussed:

Even if we lost something in life, like a father or close person, we could still live up to their expectations. They would not like us to cry or grieve, yet they would like us to stay strong and move forward; such a thing could be the answer to my friend at the beginning of the day.

Moving as a team is an excellent key to the success of such a movement; we have people who worked from the office to organize the workshop, people who invented the tools, and people who had to do all the calls and stay up at night to talk with the drivers to find us, we all played a small part int he whole game.

Even if everything collapses, we must move forward and do good in the world. We might not see the result of the goods, but they will grow over time; they're like a tree you plant; you might die, but the impact will live as long as it's there. The tree you plant could have someone or a bird to benefit from, which is a huge thing to have. In our culture, we even have a saying by prophet Mohammad (SAW): If the Final Hour (apocalypse) comes while you have a shoot of a plant in your hands and it is possible to plant it before the Hour comes, you should plant it.

Ultimately, this experience reminded some volunteers of the value of NGO involvement. If you work or study full-time, you might get disconnected from the world and focus on your small world. Concentrating on your study or work will make you forget the whole world. Volunteering and visiting disastrous impacted areas will remind you of your humanity and ignite your goodness.

Personally, I have been disconnected from the NGO for 2-3 years, but I feel that everyone should have a thing once each quarter to remind us of our humanity and keep us in touch with our human selves in the entire career world.

In the end, I would like to thank everyone who was involved in such a project: Selen, Bengisu, Deniz, Nisanur, Kübra, Muhammed, Recep, Gökhan, Sare, Ali, Oktay, Yazgı, Yunus. It was a great experience showing the value of teamwork, meeting for the same purpose, and even the impact of our work on others.

What about you? Do you have any volunteering experience that impacted your thoughts?

What is Vercel's AI tool, V0.dev and how do you use it?

Abdurrahman Rajab — Tue, 16 Jan 2024 05:15:00 +0000

A few months ago, Vercel announced V0.dev for developers and designers to generate react code with AI—the only issue with the announcement was that v0.dev had a waitlist and was not open for anyone. Recently, I got access to the website from the waitlist, but it’s available for everyone with a Vercel account right now.

Such tools fill the gap between developers and designers and save time for many companies when they launch their projects and products. In this article, I will share the value of the project, how it works, and the impact of open source on such projects.

v0.dev is a ChatGPT-like tool that only focuses on generating the code for the user interface. It uses shadcn/ui and Tailwind CSS libraries to generate that code. After generating the code, the website gives you an npx install command to add the component to your software.

Testing Scenarios:

V0 provides you with the ability to write prompts to create the design. Besides that, V0 processes images and allows you to improve the design of your selected elements. With all of these features, I decided to test the project and benchmark it over the next questions:

Does it provide a production-ready code?
Does it understand the image you provide?
Does it work in other languages?
Could you use it on an established project?
Could you use it for new projects?

With these questions, I decided to do my experiments based on two projects that I am involved with: the first is OpenSauced, and the second is okuyun.org.

First experiment: a search engine example

My first experience was with a new project I wanted to start from scratch. The main goal was to have a search engine user interface with few examples for users. I got the result I wanted after having twelve prompts written for that, which is quite interesting and impressive. In the next image, you can find the last design that I got:

The full prompts are in this link. The project seems to have a great result and provided a beautiful code that could be used in a project immediately. The only consideration I had in the code was that it’s a bit fragmented and does not provide a component that could encapsulate its results. This causes a bit of spaghetti code for a large project.

Here you can see the generated code:



  <div className="border-2 border-gray-300 rounded-md p-2">
            <Card>
              <div className="flex justify-between">
                <div className="flex items-center">
                  <Button className="bg-blue-500 text-white rounded-md px-2 py-1 ml-2">
                    <GoalIcon className="h-4 w-4" />
                  </Button>
                  <CardHeader className="font-semibold">OpenAI</CardHeader>
                </div>
                <CardContent className="text-gray-500">A research organization for AI.</CardContent>
              </div>
            </Card>
          </div>
          <div className="border-2 border-gray-300 rounded-md p-2">
            <Card>
              <div className="flex justify-between">
                <div className="flex items-center">
                  <Button className="bg-blue-500 text-white rounded-md px-2 py-1 ml-2">
                    <GoalIcon className="h-4 w-4" />
                  </Button>
                  <CardHeader className="font-semibold">Tailwind CSS</CardHeader>
                </div>
                <CardContent className="text-gray-500">A utility-first CSS framework.</CardContent>
              </div>
            </Card>
          </div>
          <div className="border-2 border-gray-300 rounded-md p-2">
            <Card>
              <div className="flex justify-between">
                <div className="flex items-center">
                  <Button className="bg-blue-500 text-white rounded-md px-2 py-1 ml-2">
                    <GoalIcon className="h-4 w-4" />
                  </Button>
                  <CardHeader className="font-semibold">GPT-4</CardHeader>
                </div>
                <CardContent className="text-gray-500">A model by OpenAI.</CardContent>
              </div>
            </Card>
          </div>

I would prefer a component that encapsulates the elements and provides parameters through it, which would be a great addition to a project. A simple example I would expect would be:



<serachResult title=”GPT” description=”A model by OpneAI” link=”openai.com”></searchResult>

This would save the extra code, minimize the lines, and increase the readability of the code. I am aware that having such a result from an AI in the first shot would be a bit tricky, but this would make you understand how to use it, its limitations, and the system's ability.

Second experiment: an OpenSauced component

As for OpenSauced, my experiment was to check if I could use a Figma design in V0. I wanted to import the Figma design and then implement a user interface for the project. At the end of the experiment, I compared the output result with an actual component that Nick Taylor, a Senior frontend engineer, wrote for the OpenSauced project. As for OpenSauced, the project uses Tailwind and Radix, the framework that shadcn uses under the hood.

With this structure, I thought making the related design from Figma would be easy. The first issue I faced was the inability to import Figma files directly, so I had to take a screenshot of the component I needed to implement and provide to V0. This gave me the first result of the code, which was the first draft I worked on to improve and get the desired result. You can compare the first draft and the image I provided below.

With 17 iterations, I could get the result that I somehow expected. This iteration helped me to understand the logic behind v0 and how it works and be precise with the language—the final result.

Even though the result was quite interesting regarding the view, it differed from the result that Nick Taylor has written. If we do a quick comparison, you can find that Nick relied on the code written before for OpenSauced, which v0 is unaware of. This was the most significant issue you would face when using v0. Other than that, it would be the reusability of the component written with which I have mentioned in the first experiment.

Third Scenario: Arabic (non-Latin) Language

For this scenario, I tried the model with other languages. The main idea is to check if it’s diverse and allows other nations to use that or if it is only closed to English speakers. Enabling the tech in local languages will have a better and more diverse and inclusive community; at the same time, it will allow young children who have not learned new languages or are not confident about their languages to get access to these tools that will enable them to create a great future!

My experience with this was just having a prompt to ask to design a page, I did not expect much, but it was a bit interesting since it worked like the English language and provided the great results that I was expecting.

Here is the next prompt I used:
قم بتصميم محرك بحث للقرآن الكريم
Which means: Design a search engine for the Quran.

This provided an interesting result for the query with understanding the meaning of the Quran:

With this step, I moved forward to have a two-screen side to show the result on one side and have the search engine on the other side and it provided a great example for that:

Even checking the results of the project on the mobile screen provided a great responsive result which was impressive for me.

Looking at the code, you would notice that V0 used the tailwind flex class and used semantic HTML, which provides a great result for responsivity and rendering. Here is a part of the generated code:



 <main className="flex flex-col lg:flex-row items-start lg:items-center justify-center h-screen bg-[#fafafa] p-6 lg:p-12">
      <div className="w-full max-w-md lg:max-w-lg">
        <h1 className="text-3xl font-bold text-center mb-6 text-gray-700">Quran Search Engine</h1>

One of the the main issue I noticed is that the output code and user interface do not include any words from Arabic. This could turn off non-English speakers, yet using translation tools would help them. Besides that, the output user interface does not align with RTL (right to left) standards, which are the standards for languages like Arabic. For that reason, I did write an extra prompt asking to fix both of these issues, here is the prompt:
النتيجة ليست باللغة العربية قم بتحويل النصوص إلى اللغة العربية وتحويل نظام الشاشة من اليمين إلى اليسار
Which translates to: The result is not in Arabic, translate the text into Arabic and turn the screen mode into RTL.

The result was quite interesting, in the next image you can notice that v0.dev has fully converted the output code to RTL and translated the text, with minor details that might need to be considered by the developer.

With this result I could get to the conclusion of being able to use different languages for user interface generation and enabling more communities to get access to such tools. The developers will need to take care of minor details to have the user interface fully adjusted for their needs.

The results

To get back to the questions that I asked at the beginning of this article, I could conclude with the next question:

Does it provide a production-ready code?

Yes, the code that V0 provides could be used in production with minor tweaks and checks. By tweaks, I mean converting the large bits into reusable components, checking the accessibility issues, and evaluating the code with your code standards. The main point here is to have it integrated with your stack. If you are using react, tailwind, and shadcn then you would be in the right direction to use the software.

The only issue here is that it would not understand your design system. You would need to think about the design system; if you are using an atomic design system, then a great way for you to benefit from this tool is to request it to write the atoms and molecules, then you would need to use them in your project.

Does it understand the image we provided?

Yes, but the image process does require a few improvements. I think the area for this improvement would be a great research field for AI researchers, where they would need to have a user interface-focused image analysis and benefit from the algorithms that could process images. If some work has already been done in academia, then converting that research to a real product that would satisfy the users would be quite challenging.

Does it work in other languages?

Yes, As we have tested it in Arabic. I believe that the result would be great as well in other languages. The issue with such tools is that they might not have a full understanding of the language-specific issues like RTL for the Arabic language. You must address these issues by yourself and do your checks to fully adjust the design for your needs.

Could we use it on an established project?

I believe that using v0 on an established project would be quite challenging if you think to take the result immediately, yet if you would think about using it as a friendly helper or someone who would do the basic work, then you would adhere to that work on your project then it would be helpful.

Could we use it for new projects?

Using v0 for new projects would be much easier to kick off. Overtime, you would need to improve the quality and understand the system to extract reusable components that could help you have a faster development cycle for your project.

Improved v0

With the experiments that I made. I believe v0 will be better in a few places and would love to see it improved. In the next section, I will mention the areas that Vercel could improve and write the impact that developers and designers would reach:

Design System integrations

One of the central and most significant issues V0 would need to solve is understanding the design systems. Understanding the design system would help companies integrate with it more easily since some companies might have used their design system in production for years. Since the v0 and GPT revolution is relatively new in industry usage, tackling this issue would be exciting and provide value for using the software in production.

One of the simple ways to get into that is to have a client-side for the v0 that Vercel would integrate with the code editor, an approach that GitHub copilot is following. With this approach, the v0 could create an extension in VS Code, for example. With this extension, V0 would take the file names and information from the project to understand the design system, and then it should be directed to the related design system and provide the code and component based on that. This approach would be similar to the multimodal AI approach that Gemini and OpenAI use.

Another approach that Vercel could use in Beta is a GitHub Copilot labs-like extension; the GitHub Copilot labs used to have directed inputs for their GPT model. The directed inputs used to be code cleaning, writing tests, and even code refactoring options. The extension was discontinued after integrating it with the Copilot chat model. Yet, for v0, having directed options and inputs like choosing a design system, writing molecules, writing atoms, or even components would help to integrate more with the production systems that people have and give a great iteration cycle for Vercel to understand their customers and community needs.

Importing from design software

One of the great features such a system would need to have is the ability to import from the design software like Figma. The approach I used in this review was to take a screenshot of the Figma design and provide it as a prompt to v0. Yet, if Vercel implements the ability to import from Figma, V0 would take a new leap to help programmers and designers.

This improvement could help import and integrate with the current behavior of designers and developers. Over time, it would be more convenient to enable the design software to have prompts and iterations over them.

Improved image processing:

With the second experiment I have done in this review, the layout of the component and the first output are slightly different than the input image. Besides that, you would notice the missed icons in the first output image, which is odd for a great sophisticated system like v0. In the future, it would be great to have a way that the system would understand the icons and layout provided in the image.

Such improvement is possible by analyzing the images and dividing the process into multiple shots for prompts or even having a multimodal design that could understand the layout and icons. Such improvements could make the system more robust and minimize the back-and-forth prompts for the system to get the expected results.

I believe that creating a model that allows you to get the names of the icons in the images, the layout, and the CSS features would be a promising system that would enable the integrity of the AI model in industry applications.

Improving the User experience of the website

The v0 website has two great features you could use to develop and give prompts. One of them is enabling you to edit the code immediately and write the prompts based on that. The other feature is the ability to choose a specific element, allowing you to write prompts for that particular element.

These features are super helpful and extraordinary, yet I would like to see minor improvements in them. As for the code editor, I would love to have the ability to select an element from the user interface and get the code editor scrolled to that element immediately. This feature is similar to the HTML element inspector in browsers like Google Chrome and Mozilla Firefox. Enabling the code editor to point to the code from the view will allow you to quickly make the changes you would do as a developer instead of scrolling and using the search feature to find the related code.

The other improvement that V0 can implement is enabling the element selector to select multiple elements; the software's current phase allows you to choose one HTML element over time, yet having a way that will enable you to choose various elements would be a significant improvement. Enabling multiple element selection will save you time if you edit a page in the v0 and help you have a consistent design for the whole page.

Enabling the element selector could be done by adding extra buttons in the update menu, and saving the memory of the elements to provide to the model, or even by allowing the user to click and drag through the mouse. Here is an example of an extra button that could be added to enable this feature:

Final thoughts

With my experiments, I feel that v0 is quite sophisticated and helpful for programmers and designers. It will bridge the gap between them and even have a faster development cycle for web apps. You can use V0 for new projects with the same tech stack. In the future, I expect the Vercel team to support new tech stacks and design systems, which would have a considerable impact and more extensive reach for the community.

On the other hand, these improvements and programs will put a huge load on developers and designers to continue learning new tools and improving their mindset; otherwise, they would risk their jobs. The developers must increase their knowledge of accessibility, multilanguage support, design systems, and user experience. Those skills with the developer would allow them to be more productive and create great results from such tools. For designers, I envision that other companies like Adobe and Figma will try to make V0-like tools. The V0-like tools will be integrated more with their design software, and they will need to understand the output code to have more flexibility and power over their results.

These tools would not be able to test all the results and scenarios that programmers might face, like accessibility, as Vercel mentioned in their docs, or even responsibility. Having them beside you would be helpful if you knew how to use them.

2023 Reflection: a pivotal year for the open source journey

Abdurrahman Rajab — Tue, 09 Jan 2024 19:03:00 +0000

2023 Reflection: a pivotal year for the open source journey

Reflecting on your time, year, and week would help you understand what you have achieved and learn more about yourself by recognizing the major and minor things you have encountered. I am writing this post to review the lessons I learned last year. I will add November and December 2022 in this review since those months greatly impacted my journey during 2023.

I decided to name the year as pivotal since it impacted my journey in working and gave me a wider angle to look at open source, work management, and a few other topics that will play an important role in the future.

Events

GitHub Universe 2022

In November 2022, as a part of the GitHub Campus Expert program, the GitHub Education team invited me to join the GitHub Universe conference. During the GitHub universe, I had the pleasure of meeting awesome open-source maintainers, Campus Experts, and GitHub VPs like Martin Woodward and Stormy Peters.

The whole Universe experience is really interesting and inspiring. I will need to write a blog about it only. Yet, the most important thing is the ability to network with other Campus Experts and meet great people like Ahmad Awais, which will hugely impact my 2023 year!

Networking in the Universe has allowed me to understand myself more, overcome imposter syndrome (somehow), and even unlock a few opportunities in 2023.

TV Interviews

After the GitHub Universe, I had a friend who pushed me to get on TV to talk about my experience at the Universe. Such a push unlocked the door for me to have other TV interviews with different TV channels, like the Turkish National Channel, Yemeni Channel, and Syrian Channel. During these interviews, I had the chance to share my thoughts and talk about my experience in programming, AI, and the Universe conference.
If you are curious about the TV channels and the topic I covered, here is a short information about them and the topic list.

As for channels, I have been hosted in the following:

TRT Arabic: which is Turkish national TV focusing on the Arab-speaking people.
Syria TV: A Syrian independent TV channel that focuses focusing the the country
Balqees TV: A Yemeni channel covering Yemen news and technology advancement. Run by the Nobel Prize for Peace winner Tawakkol Karman.

During those TV interviews, I covered the following topics:

The GitHub Universe 2022 experience
The value of open source contributions to developing countries
The value of AI research and ChatGPT
Technology Privacy
How AI will impact humans
Teaching programming for children in the AI age
Metaverse as a new technology and its impact on people
The security of wearable devices
The value of AR/VR in different fields, medicine, science and mechanics

Being on TV in my twenties was not something I expected yet; it’s really helpful and interesting to be exposed to such an area and make related connections.

Career

Regarding my career, I had the chance to work in two great companies. The first is RapidAPI, and the second is Unify.ai, a YC company with an ambitious mission and founder that aims to unify the fragmented AI.

During my work with them, I improved my experience in writing communication in a fully async remote environment. This helped shape my thoughts about engineering management and the type of work that we have. I have written a summary of my career in general, which you can find in this link.

This year's only downside is that unify.ai/ivy had layoffs for almost 50% of the workers, which affected me. With that, I again started my job hunting journey at the end of 2023!

If you got curious about the career journey, feel free to read the full version from this link

Education

Regarding Education, I am continuing my master's degree in Computer Engineering. During this year, I had great exposure to different concepts and principles in engineering, like Cyber Security, Fuzzy logic, and more. I want to write a blog about this exposure in the next few weeks.

Doing a master's at university will help me get a bit of exposure to the research community in academics and help me get experience in research and writing papers, which, in my thoughts, will increase the value of research over time. The other thing I might achieve while doing a research master's is understanding the gap between academia and industry and having a different perspective.

Hadith Tech

This year, hadith tech has played a vital role in my experience. I have hosted some awesome people in the podcast that have shaped my thoughts about open source and empowered me with the related mindset to contribute to open source. This contribution has sharpened my skills, enabled me to work on personal projects, and even have a few friends from the open-source community!

Besides that, open source enabled me to work with Unify.ai and get experience that would only be limited to specific regions and senior people. The open source enables you to get into that knowledge without holding it in a small group of people in a specific geographical position.

Here is a list of the episodes that I had in Hadith Tech this year:

English:

Matthew Mirman - Anarchy Founder - Link
Abubakar Abid - Gradio Founder and Machine Learning lead at Hugging Face - Link
Olabode Lawal-Shittabey - Open Source Engineer - Link
Nick Taylor - Senior Software Engineer at OpenSauced - Link
Elena Lape - Holopin Founder - Link
Rishit Dagli - Machine Learning Researcher at Civo - Link
Federico Grandi - Open Source Engineer - Link
Forest Anderson - Open Source Engineer - Link
Daniel Lenton - Unify.ai Founder - Link
Megan Kaczanowski - Cybersecurity Professional at clearme.com - Link
Brian Douglas - OpenSauced Founder - Link

Arabic:

Faris Masad - Replit Co-founder - Link
Taha Zuhair - DevOps Engineer at Efficy - Link
Joe Hakim Rahme - Quality Engineering Manager at RedHat - Link
Mohammad Khair - Principal Engineer at GE HealthCare - Link
Thamood Mahfuz - Producer at Thamanyah - Link

You can check the full videos from this link.

Open Source:

With my experience in the universe and touching on the value of open source, I have gotten more involved in open source this year. I started by contributing to other projects. The idea is that I needed to get out of my comfort zone and project hell and have experience with projects that have multiple contributors. For that, I have contributed to OpenSauced and Cal.com over the years and had multiple other minor contributions that could be considered.

Doing this allowed me to meet great people, connect with a larger community, and build friendships worldwide. I was pleased to meet awesome developers from Nigeria, Senegal, The USA, Canada, and more!

Connecting with the wider community is just a gift that I got from open source!

Experiments

Over the years, I have done multiple experiments to improve myself and optimize productivity. Here, I am going to share some of the experiences that I had and the results I got.

30 days of open source

In this experience, I had a goal to start with open source. The main goal was to get comfortable contributing and adding value to projects. I have been involved in open source for a while but never contributed to projects for the long term, which is my main goal while doing this experiment.

This improved my skills as a software engineer, exposed technologies that would be hard to do alone, and even showed me how some great projects run and what I could expect from the open-source community.

I still remember the first time I contributed to Open Sauced, which made me meet Takanome-dev and learn from him how to read and understand the contributor's guide. Besides that, I remember when I first contributed to cal.com and learned tailwind from them because someone from the community jumped in and showed me direction. This experience would not be possible without having great people in an open-source and collaborative environment. At the same time, I would not be able to do that If I did not tackle my fear or had the imposter syndrome of being afraid to work on an established project.

30 days of live streams

The second experiment that I had was doing 30 days of live streams without having a goal. This enabled me to contribute to projects and make friends from a different channel. At the same time, such a stream helped me to have a couple of pair programming sessions with the open-source community.

The streams built the habit of going live spontaneously, learning more about streaming and how to use software, and even going forward without any expectations! The only goal for me was to add value and not expect any results in the short term, which helped me not get disappointed or have a breakdown while doing them.

1 hour of daily open-source.

For the one hour of open source, I decided to do it with the live streams. Combining two goals in one work was a great experience. This helped me to be consistent with my work and have an accountability system. Over time, this system helped me to have the first Chrome extension project I worked on, an emoji menu Chrome extension.

The idea of the extension came while doing a stream and went on the learning journey live. This required me to think about the audience and explain my thoughts while coding.

Digital Garden: Second brain, etc

One of the important things in being with communities is getting exposure to new ideas, seeing how it works, and what you could do for that. I encountered the concept of the digital garden for the first time while in a discussion in the GitHub Campus Expert community. This ignited my curiosity to explore the concept and learn how to adapt it to my needs.

I am still hesitant with the concept, yet I believe it is a great way to share your thoughts and ideas and enable you to be a creative human rather than a production machine!

I played around with the concept and tried obsidian but did not move forward since I was hesitant about what could be public and private. Yet, I feel that I am overthinking the situation, and it would be great to just jump into that and publish the ideas and thoughts I have in my digital garden and grow them over time.

2024 goals!

My goals for 2024 would be to establish a better system for myself to follow and be able to contribute more to open source and community through that system. The main idea of having a system is that it would enable me to have better access and reach. I'm unsure how that would happen, but I will figure it out over time.

Besides having the system, I plan to continue doing the Hadith Tech podcast and run a project or two next year to reach financial stability or even work with a good company since I was affected by the end-of-the-year layoffs.

5 Ways Programmers Can Use AI Tools to Improve Their Lives

Abdurrahman Rajab — Thu, 28 Dec 2023 22:10:00 +0000

During the end of 2022, we had a significant development in AI and human history, which was the birth of GPT products through ChatGPT and their availability for public use. Such tools and developments in AI impacted people's lives and minds, and a whole hype was born around this topic.

Developers created new tools on top of it. Researchers from different fields started a new research phase. Entrepreneurs started companies based on ChatGPT products. Today, I will show you seven use cases of ChatGPT-like tools for programming and how they could help you be a better and faster programmer.

How does it work?

Before jumping into the use case we are exploring in this article, I would like to highlight the main principles of ChatGPT-like tools: they have limited information and are just math! What does that mean?

ChatGPT and other AI tools work by calculating the possibility of the answer to the prompt you are giving and generating a result based on that. The ChatGPT-like tool should have seen the issue before or been trained on large amounts of data to perform well; otherwise, it would take a lot of work to get the expected results. By training, we mean providing previous inputs to process and parse into its knowledge base.

Therefore, those tools are better with the foundations and struggle with recent technologies; by recent, we mean anything after the period used for training the AI tools.

Now, let's jump to the cases I am discussing; you will notice in the article that I use multiple tools for different purposes. These tools will enable you to think and explore more. Even though the tools are developed on the same foundation model, they perform differently based on the domain they are trained for and the prompts.

Case 1: Patterns and RegEx

One of the cases where ChatGPT would help you in programming is RegEx. For those who do not know, RegEx means regular expressions, a sequence of characters that specify a pattern to match. For example, if you want to find numbers in a text, you could use RegEx syntax (\d+) to find and replace them.

As for these patterns, since it's been around in the programming world for a long time, ChatGPT Would be a great tool to find patterns for specific tests, explain them, and even help you understand your patterns.

I have used this while trying to find a tailwind anti-pattern in the code of OpenSauced; here are the steps that I have followed to do that and create a pull request based on that:

I asked ChatGPT to get the RegEx I needed,
Searched for that by using the VS Code find tool,
I opened the results in a file (I did this from VS Code; it has such a feature!)
Then, I cleaned the file by using another RegEx.

Doing this without ChatGPT is possible, but I need to think about the best RegEx pattern and work until I find it, yet ChatGPT did that in a few seconds.

Here is an example of the ChatGPT prompt and the result:

write a regex that has the following: 
check the begining of the line
check if the begining is empty
check if there is a number followed with two dots
check if there is a new line after that line

Result:

// ChatGPT
To match a regex pattern that checks the beginning of a line, checks if the beginning is empty, checks if there is a number followed by two dots, and checks if there is a newline after that line, you can use the following regex:
regexCopy code
^(?=\s*\d+\.\.\s*$) 
Here's a breakdown of the regex pattern:

1. ^ - Anchors the regex to the beginning of the line.
2. (?= - Starts a positive lookahead assertion, which is used for checking without consuming characters.
3. \s* - Matches zero or more whitespace characters.
4. \d+ - Matches one or more digits (a number).
5. \.\. - Matches two dots.
6. \s* - Matches zero or more whitespace characters.
7. $ - Anchors the regex to the end of the line.
8. ) - Ends the positive lookahead assertion.

This regex pattern will only match lines that meet the specified criteria: an empty line that contains only a number followed by two dots and is followed by a newline.

Case 2: Parsing Unstructured Data

Sometimes, when you program, you need to get structured data from an unstructured one or even scrap some data from a text. You must be able to use it in your project or website. You might find it easier to structure the data by using ChatGPT.

I followed this when I wanted to write a JSON file out of a YouTube list; instead of doing a complex programming solution that might take half an hour, my go-to solution was ChatGPT.

I had to get the data from YouTube, which was semi-structured; I asked ChatGPT to convert it to JSON to use on hadithtech.com website and Hola! the PR is ready!

It only takes a few seconds to do that. If it were not for ChatGPT, it would take more time.
Here is the data that I got from YouTube:

Here is the result from ChatGPT:

Case 3: A pair programming friend

This is one of the most interesting cases. Here, you will need to think about ChatGPT-like tools as your friend or assistant, but at the same time, you will need to trust your judgment and yourself.

Refactor

If you are an open source maintainer, you probably do code reviews a lot. You may need to check if a code is good or has any concerns. You could use copilot chat, ask it directly about a code, and get the results based on that. I did that with the next code and got a good result that you could see.

Here is an example code:

    let focusOnHighlighCreationInput: NodeJS.Timeout;


    if (window.innerWidth > 768) {
      focusOnHighlighCreationInput = setInterval(() => {
        const highlightCreationInput = document.getElementById("highlight-create-input");
        if (newHighlight && highlightCreationInput) {
          highlightCreationInput.click();
          highlightCreationInput.focus();
          clearInterval(focusOnHighlighCreationInput);
        }
      }, 1000);
    } else {
      // for mobile. No need to focus on input, just click on the button as it opens up a form anyway.
      focusOnHighlighCreationInput = setInterval(() => {
        const mobileHighlightCreateButton = document.getElementById("mobile-highlight-create-button");
        if (newHighlight && mobileHighlightCreateButton) {
          mobileHighlightCreateButton.click();
          clearInterval(focusOnHighlighCreationInput);
        }
      }, 1000);
    }

As you can notice in the code above, there is repatriation in the logic and code, which might need to get refactored. But before going to that, I asked Copilot chat about its opinion on this, and here is the result:

The prompt:

Should we refactor this code and why?

The result:

Yes, this code can be refactored for several reasons:

Code Duplication: The setInterval function and the clearInterval function are duplicated in both the if and else blocks. This can be abstracted into a separate function.

Separation of Concerns: The code is directly manipulating the DOM and handling UI logic. This is not recommended in React. Instead, state and props should be used to handle UI changes.

Performance: Using setInterval and document.getElementById repeatedly can be performance-intensive. It's better to use event listeners or React's lifecycle methods or hooks.

As you can see, Copilot detected the issues, suggested that we go further, and asked to refactor the code, which gave satisfying results in less than a minute. I then asked Copilot chat to fix the code:

The prompts:

refactor the selected code to have less code and use DRY principle

The results:

let focusOnHighlighCreationInput: NodeJS.Timeout;


const focusOrClickElement = (elementId: string, isMobile: boolean) => {
  focusOnHighlighCreationInput = setInterval(() => {
    const element = document.getElementById(elementId);
    if (newHighlight && element) {
      element.click();
      if (!isMobile) {
        element.focus();
      }
      clearInterval(focusOnHighlighCreationInput);
    }
  }, 1000);
}


if (window.innerWidth > 768) {
  focusOrClickElement("highlight-create-input", false);
} else {
  // for mobile. No need to focus on input, just click on the button as it opens up a form anyway.
  focusOrClickElement("mobile-highlight-create-button", true);
}

I was almost satisfied with this result, but the last part of the if statement could be done better. For that, I wrote another prompt to push Copilot to get rid of that code, and here is the result:

Prompt:

could we get rid off the last if statement and include that in the code directly?

The output code:

// Determine the element id and whether to focus based on the window width
const elementId = window.innerWidth > 768 ? "highlight-create-input" : "mobile-highlight-create-button";
const shouldFocus = window.innerWidth > 768;

handleHighlightCreation(elementId, shouldFocus);

With this result, I felt satisfied and could code faster with Copilot chat. The only struggle someone would find here is understanding the code and detecting which code needs refactoring.

Explaining code

This is when you think about ChatGPT as a friend. Instead of asking ChatGPT to write a code, you might need to understand a code written in some language to use the logic or learn from it. For that, you can use the ChatGPT-like tools to help you with it and be able to provide relative information based on your needs and requirements. This will help you to learn faster and get the results in a short time.

If you are an open-source contributor, you might wonder how to understand a function or might need to get some help for understanding that, yet the people are in different time zones or busy, for you might ask the Copilot Chat or ChatGPT-like tools to explain a specific function and give you some details. This would increase the development speed and eliminate the delay that might happen due to the communication.

As an example, I used Copilot chat to explain the code written in the previous example in two sentences, and here is the result:

The highlighted TypeScript/React code defines a function handleHighlightCreation that sets up an interval to check for a new highlight and a specific HTML element every second. If both exist, it simulates a click event on the element, optionally focuses on it (based on the shouldFocus argument), and then clears the interval.

From there, you can continue to ask questions to clarify until you get the answer you need. One popular prompt people use when asking ChatGPT to explain something is, “Explain this to me like I’m five,” for a simplified version of the explanation.

Security checks

This would feel more like code explaining, but when you specify the domain, it would help you to get more specific answers that might fit your needs.

Security checks would be an interesting case for the AI tools; the only thing here is that it depends on the knowledge base that we have; as for this, you can use the GitHub Copilot chat inside your editor and select a text and ask questions that you need to figure out or get an insight about it like:

Would this code have a memory leak?
Does this code have any security issues?
Give me an example of SQL injection for this code.

Such prompts would be helpful for you to use when you write code and to get input about how to fix that. Even though AI tools might not give you the best solution or answer, it will be helpful to guide you.

The examples I provided above rely on Bassem Dghaidi, a senior software engineer at GitHub, a workshop provided during Universe 2023, and a video about it.

Case 4: Documentation suggestions

When you write a code, you might need to write the documentation related to it or even update it for future usage; the value is remembering what you did and delivering a message quickly. The only issue is that writing good docs is hard and time-consuming.

For that reason, you might rely on ChatGPT, where you give it a function and ask for the documentation related to it, so it will help you write the docs and have a great result. This will not only help you develop your project but also empower other people to use the project.

A few weeks ago, we hosted an extended AI-related Twitter space. (Feel free to listen to it if you have not yet). During the space, one of the guests suggested improvement in AI would require us, as developers, to write great documentation to be used in the model training to provide clean training data and extract better results.

Another use case would be asking ChatGPT to evaluate your documentation. Ask if there's a way to simplify. Ask if there is a code sample that would be useful or to help you create an example that a global audience can understand by removing jargon.

Our Developer Experience Lead, Bekah Hawrot Weigel, has used ChatGPT to repurpose documentation into other forms like drafts of guides.

Another few companies use similar tools to have a QnA bot for their documentation like [Kapa.ai], which is used to learn from the documentation and tutorials and provide support for developers to understand the documentation and answer their questions.

All of these tools and ideas would help developers and no code contributors take part in developing open-source projects and add value to them.

Case 5: Pull Request Descriptions

One of the most important aspects of open source contributions is communication between the team. The pull request description would be the way to do that through the code. Writing a great description could be hard work after working on your code. This skill requires a concise and articulate description so the reviewer understands what your PR has done and accomplished.

As for this, you could use the AI tools, which would help you; instead of checking the code yourself, you can ask the tools to provide the description, and your job is to check if it's correct or not. This will make things easier for you.

To do this, you could use a couple of great software here, I am going to explain three interesting ones,

In the previous options, you could notice that Codium.Ai and OpenSauced.ai are open-source options, and Copilot is focused on enterprises. Both OpenSauced and Codium have leveraged OpenAI APIs.

As for the OpenSauced extension, we use the commit messages and the diff between the changes to generate the summary of the PRs. Then, we add that summary to the PR immediately. Such a feature would make writing the PR summary take less than a minute and save you time.

At OpenSauced, we value the open-source community. We have developed the Chrome extension to help you while you contribute to open source through providing, refactoring, code explanation, and test tools in the PR review and writing the tests for the code, and even cover almost all of the use cases that we have mentioned in this article if you have not used it, we encourage you to download the extension from opensauced.ai.

A screenshot from OpenSauced.ai chrome extension

In the end, remember that those tools would only make sense if you had insight or an idea about what you are writing and will require you to vet the output when you get it. Therefore, we still need human input to get the best result.

Do you have other cases of AI usage in programming that we did not cover? Please share that in the comments!

How to implement emojis in Vercel/satori

Abdurrahman Rajab — Tue, 19 Dec 2023 18:30:00 +0000

One of the main features that we have in OpenSauced is the highlights, which enables the users to share their latest contributions that they made in open source on our website.

This allows them to have impact-focused stories around their work, more visibility, and an opportunity to inspire and connect with other contributors. While having the highlights on our website was great, we wanted to enable the users to share them on social media, which let us work on implementing the open graph for our website.

In the open graph repo, we used Vercel/Satori library to provide the needed social card images. This implementation got us into an issue with emojis, which were shown as black lines instead of rendered correctly, as shown in the image below.

Those blocks meant that we needed to change our implementation to fix the issue. When we started to investigate the issue, we thought that it was related to our code and that we just needed to implement some library to render the emojis, but we were wrong with that assumption.

Understanding the Issue

To figure out what we need to do, we investigated the issue by:

Checking what we had,
Creating a hypothesis,
Checking if anyone else reported the same issue before or reported on a solution,
Testing the hypothesis and working on a solution.

Whenever a hypothesis was not working, we moved on and worked on another solution.

Testing Our Hypothesis

We assumed at the beginning that we needed to implement an emoji rendering frame to our implementation, which did not work. Because that didn’t work, we checked Vercel/Satori documentation since we rely on them. Once there, we noticed they had that document on the readme, which we did not see!

The only issue is that they mention how to find an emoji on a page, but they do not mention how to render that emoji. Because there wasn’t an explanation, we checked to see if they had an example.

We went to their repository and checked their examples to see if we could figure out if they had implemented the same logic before or not. We found that they have an open-source example using emojis, and we implemented this example in our project.

When we checked the example, we noticed that it's not only open source, but the Vercel team has modified Twitter's open-source code to implement their solution, which is a great example showing how open source can help companies to be more innovative.

To add emoji support, we converted the string to code point, a number representation of the string in the character systems. Then, we used a third library, Tweemoji, to request and return the SVG code of that emoji.

Before adding the utility functions we used to get the SVG image of the emojis, we only called the Satori function.

    const svg = await satori(template, {
      width: 1200,
      height: 627,
      fonts: [
        {
          name: "Inter",
          data: interArrayBuffer,
          weight: 400,
          style: "normal",
        },
        {
          name: "Inter",
          data: interArrayBufferMedium,
          weight: 500,
          style: "normal",
        },
      ],
      tailwindConfig,
    );

With emoji implementation, we added the load assets function, a built-in function for satori, to the call and updated it with util functions.

  loadAdditionalAsset: async (code: string, segment: string) => {
        if (code === "emoji") {
          // if segment is an emoji
          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
          return `data:image/svg+xml;base64,${btoa(await loadEmoji("twemoji", getIconCode(segment)))}`;
        }


        // if segment is normal text
        return code;
      },
    }

If you are curious about the full code. Feel free to check this PR with the full code.

A few months later, Biodrop, another open-source project, followed the same implementation that we used in our project to enable the embedding of their cards on other websites.

A social card with emojis after the implementation of this feature.

Do you know any other open-source projects that enabled people to be more innovative and faster?

How open source landed me a job in a YC company

Abdurrahman Rajab — Wed, 22 Nov 2023 22:00:00 +0000

When I first heard about open source, I was excited by the idea and amazed by the ecosystem behind it, yet I was not sure how to contribute or what benefits it could provide. I was looking at it as a way to spend time and volunteer, yet today, I am writing about how open source changed my life and got me a job in a company 3000 kilometers away! In this blog, I will share my journey in open source to inspire you to start your journey.

The beginning:

My family is an immigrant family from Syria that has been residing in Saudi Arabia. After the unfortunate loss of my father at a young age, we initially decided to return to Syria. With the onset of the revolution in Syria, it became increasingly unsafe to continue living there. Consequently, my mother decided to return to Saudi Arabia. However, due to certain restrictions in the educational system, we ultimately moved to Turkey to pursue higher education. My mother, a mathematics teacher who highly values education, saw Turkey as a promising opportunity for us.

Due to the love of education and technology I inherited from my parents, I was in touch with technology for a long time. My father's continuous learning approach and love of technology made him connect us to the internet at the beginning of elementary school. Before high school, I did not have a personal computer, but I had a family computer that we all shared, with my access limited to one day a week! I became aware of open source in high school. Back then, I heard about Ubuntu, Linux, and the tools available to people and developers.

At that time, I was unsure how to code or even learn about that, nor did I know the community behind it. During high school, I used to tinker and format computers and used to visit the computer repair shops in my area. This situation stayed with me till university. At that time, I started to learn programming and coding in my engineering degree. Then, I heard about GitHub. I used it as a drive to push my homework from school, which used to be tricky since the university did not allow me to share homework in public, and it counted as cheating.

While at university, I stumbled upon the GitHub Campus Expert program. A program that enables community leaders in their local areas. At that time, I was involved with one of the tech clubs at university and had a great love of open source as a user, which helped me to get accepted into the program.

The program had great values and opportunities for me. Looking back, I could not seize them all due to the university schedule. Yet, the most amazing part was starting my podcast, Hadith Tech, supported by GitHub Education, which will play a significant role in the story later.

During the last year, I was selected by one of my professors, Akif Eyler, to work on an open-source search engine as a graduation project, for which I am thankful I was able to get real-world experience during that project. The project is live now and has some users. This project provided me with a unique experience. The experience varied in different areas. During the project, I worked on the UI/UX design, the similarity engine, which used a vector-based and cosine similarity algorithm to get similar texts and suggest them. At the same time, I worked on the linguistic side, which used to get the root of the word and enable a search based on that! The experience provided a better understanding of open source and engineering. During this project, I learned the value of communication in open source, tracking issues, and community to sustain a project.

Navigating the job market

I graduated from university during COVID. There were a lot of layoffs happening at that time. The market was struggling, and I could not find a job in the market in the time that I was expecting. Back then, I felt my knowledge and degree were enough to find a job through an online application. I was wrong; I needed a network, soft skills, patience, and communication skills.

I landed my first two jobs by networking and building connections. However, because of the demanding expectations and an inability to come to reasonable workload expectations, they didn't last long.

My third job came from a friend's referral at a unicorn company. The company had a huge workload, so I continued there for several months. During that time, I hosted my second podcast season and launched the English one. At that time, GitHub Education invited me to attend GitHub Universe 2022, significantly impacting my journey.

This invitation had consequences, though, which caused me to get fired from the company. There were two reasons for that. The first one was that I did follow the leave request process for the conference; I got approval to join the conference, but when I returned, I had a jet lag and asked for two days of sick leave, which they rejected. The second reason was that I was doing my master's degree, which did not align with the company's demands and requirements. But was that worth it? Yes!

Open Source Opportunities:

During the GitHub Universe, I met great-minded people, learned from their experiences, and got exposed to people's experiences; at this time, I had a chance to meet my fourth employer, Ahmad Awais, who offered me a job immediately after the conference. The offer was a contract, and my first win was from open-source. After the end of the contract, I started looking for a new job with a similar opportunity and mindset.

Joining the GitHub Universe event and connecting with the open-source ecosystem provided me great value and growth opportunities. One of the side impacts of the conference was opening the door to be hosted on TV. I used to have imposter syndrome and was not ready to be on TV to talk about my experience. However, the invitation to GitHub Universe made one of my friends, Nasir Kadri, who works in television, push me to get out and talk about the open source experience and its value. He did not accept no as an answer back then. Which I am thankful for!

Hadith Tech Podcast:

As I mentioned before, I had a hadith tech podcast where I hosted great people in the tech world in Arabic and English. I had the pleasure of hosting Brian Douglas, the founder of OpenSauced, on one of the episodes. During that episode, he mentioned a few qualities people seek in programmers and how people hire programmers from open source. This talk inspired me to start a journey in coding and contributing to open source.

After my last contract, I set a goal to contribute daily to an open-source project, but I needed to figure out what project to start and how to start first. Therefore, I kept checking the OpenSauced repo for a few days until I found an issue I could work on. I decided to solve that issue in the morning; when I woke up the next day, I found the issue had already been resolved. That pushed me to work on an issue when I saw it immediately.

The first PR I opened was a development for the loading state in the app itself. This showed me how to get tasks assigned to myself and how to collaborate over a PR. After this, I felt mostly proud being on a project when one of PRs was closed! Yes, it was not merged. That PR taught me a lot about the project, the scope and the value of having small, concise PRs for the whole team, and the value of communication with the maintenance team.

I continued contributing to open source for a few months and hosting my podcast at the same time. On one of the episodes of Hadith Tech Podcast, I hosted Daniel Lenton, the founder of unify.ai, a YC company. In this episode, he mentioned a feature that would be great in GitHub. I got curious about the feature and started creating an open-source prototype for that feature.

When I finished the prototype, I shared it with him. A few days later, he sent an email asking me if I was free, and we had a short talk to see if it would be possible to work with them. I accepted that offer and started as a DevRel engineer in the company. During this call, he mentioned how he reviewed my contribution on GitHub and checked my YouTube channel, podcast, and TV interviews, which encouraged him to hire me. This would not have happened without being in an awesome open-source community like GitHub Campus Expert and OpenSauced.

The Value of Open Source:

As you can see from my journey, I have gotten into a job while contributing to open source, yet this is just a side effect of the journey. If you zoom out, you will discover that I have built genuine connections with people in the projects I have contributed to, improved my skills over time, and developed a different mindset. I would not believe it if you asked me one year ago.

As for yourself, you do not have to be able to produce the same story or have the same impact, yet you can get this story as an inspiration to figure out the hidden aspect of open source and write your story.

Are you ready to start your journey? Tell us in the comments what phase you are in right now.

5 Different Ways to Get Contributors through the GitHub API

Abdurrahman Rajab — Sun, 16 Jul 2023 14:05:01 +0000

Have you ever considered getting information about some Git projects and creating your dashboard to analyze them? This blog will help you by giving you the initial part of such a project which is getting the contributors of a project. So let's start:

This blog uses the GitHub API to explore various methods to retrieve contributors' information from a GitHub project. Remember that the API only shows the first 500 contributors associated with a GitHub username, with the rest appearing as anonymous contributors.

To begin, let's check the GitHub API documentation to understand the available information and endpoints:

List Contributors Endpoint

/repos/{owner}/{repo}/contributors

The endpoint provides information about the contributors to a project. We'll use the optional headers to minimize API requests.

1. Fetch API Iterative

The following code provides a straightforward approach to fetching contributors. We split the process into two steps for code simplicity. First, we request the endpoint and then check if we have reached the end of the list.

async function getContributors(repoName, page = 1) {  
    let request = await fetch(`https://api.github.com/repos/${repoName}/contributors?per_page=100&page=${page}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        }
    });

    // print data from the fetch on screen
    let contributorsList = await request.json();
    return contributorsList;
};

In this function, we have passed the repo name as a param and the page as well, and we kept the per_page as a maximum of 100 based on documentation.

per_page is The number of results per page (max 100).

We will now write a function to iterate over the request and collect all the contributors.

To do this, we will do the next:

have a contributors list to add the date to it.
iterate over the whole pages and get contributors
stop if we got an empty list.
return the contributors list

async function getAlllContributors(repoName) {
    let contributors = [];
    let page = 1;
    do {
        list = await getContributors(repoName, page);
        contributors = contributors.concat(list);
        page++;
    } while (list.length > 0);
    // while (list.length%100 !== 0)
    return contributors;
}

In this approach, we used a do-while loop to get the contributors at the first request and move with that. This approach will return us all the contributors we need.

As for the condition we have in the do-while loop, we can use another one, which is

list.length%100 !== 0

If we do this, it will return the same result, but we will control if the request returns the maximum results per page.

2. Fetch API recursive

Alternatively, we can write the code recursively. This version continues fetching contributors until we reach the end of the list.

Here are the steps:

getting all contributors
if it's the end of the list, return the whole list
otherwise, call the function again.

async function getAllContributorsRecursive_version1(repoName, page = 1, contributors = []) {

    const list = await getContributors(repoName, page);
    if (list.length === 0) {
        return contributors;
    }
    contributors = contributors.concat(list);
    return getAllContributors(repoName, page + 1, contributors);

}

The getContributors method here is similar to the one in the first example.

We can do this in similar logic but with a different approach by doing the next:

get contributes
if there is a list, call the function again
if the list is done, return all contributors.

async function getAllContributorsRecursive(repoName, page = 1, allContributors = []) {
    const list = await getContributors(repoName, page);
    allContributors = allContributors.concat(list);
    if (list.length === 100) {
        return getAllContributorsRecursive(repoName, page + 1, allContributors);
    }
    // The base case: when the list is empty, return allContributors
    return allContributors;
}

3. Octokit Request

Octokit will be handy if you want to use the official GitHub package for the request. You can reach the GitHub repo from this link OctoKit. The Octokit package provides official support for GitHub API requests. It offers features and authentication options for larger requests. Here's how you can use it to fetch contributors:

await octokit.request("GET /repos/{owner}/{repo}/contributors", {
  owner: "octocat",
  repo: "hello-world",
  per_page: 100, 
  page: 1,
});

4. Octokit Rest

An alternative way to write the previous code is to use the rest endpoints, which is a shorthand for that code, and you can get the documentation in the next link docs

async function getContributorsOctoKit(repo, owner, page = 1) {
    return request = await octokit.rest.repos.listContributors({
        owner,
        repo,
        per_page: 100,
        page
    });
}

Right now, we can iterate over the whole code in a similar way to the fetch that we have done before,

async function rest(){
    let contributors = [];
    let page = 1;
    let request;    
    do {
        request = await getContributorsOctoKit("tensorflow", "tensorflow", page);
        page++;
        contributors = contributors.concat(request.data);
    } while (request.data.length > 0);
    return contributors;
}

5. Octokit paginate

Lastly, Octokit provides a convenient pagination function for easy iteration over API responses. Here's how you can use it to fetch contributors:

async function paginate(){
    let contributors = [];
    const iterator = octokit.paginate.iterator(octokit.rest.repos.listContributors, {
        owner: "tensorflow",
        repo: "tensorflow",
        per_page: 100,
    });
    // iterate through each response
    for await (const { data: users } of iterator) {
        for (const user of users) {
            contributors.push(user);
        }
    }
    return contributors;
}

These five methods provide various ways to retrieve all repository contributors using the GitHub API. You can use these methods to gain insights into your projects and customize them for other GitHub REST API endpoints. If you'd like to test the code examples, you can find them in this repository. The repo is ready to be debugged with VsCode.

Finally, feel free to follow Hadith Tech Newsletter to get insights from tech leaders.

Useful resources:

Acknowledgment:

Header image