DEV Community: Omar Naguib

Share markdown: Vibe coding a tweet

Omar Naguib — Fri, 09 May 2025 16:53:42 +0000

I was scrolling through twitter when i saw this post, mentioning how there wasn't a simple tool where you can easily share and edit markdown that is embedded in the url
// Detect dark theme var iframe = document.getElementById('tweet-1920516917179146691-578'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1920516917179146691&theme=dark" }

This was the perfect project that the current tooling of AI agents is making really accessible and simple.
I was able to quickly develop it within the day, get the first users and feedback, and get a Pull Request from another developer.

I also learned a new tip.. There is a way to add URL query parameters that don't get sent to the server, that is by using hash parameters. This is an incredibly easy solution to the problem of embedding information when you don't want to involve a server.

Wanna see how that looks? check out the project here.

[Boost]

Omar Naguib — Thu, 08 May 2025 16:38:40 +0000

Omar Naguib

Apr 23 '25

Tool translation: the joy of efficient software

#programming #productivity #softwaredevelopment

Comments

2 min read

My intuition about programmer replacement theory

Omar Naguib — Wed, 23 Apr 2025 23:45:23 +0000

Software got an upgrade, it seemingly acquired the ability to think.

people's reaction: software engineering will vanish, AI will write everything, people should no longer learn to code...etc.

I don't think this is a serious discussion, and it's totally missing the subject in a major way.
Software is now more useful, it can do more, better and faster. why would software engineering be the first profession to go?

To the contrary, I think these are great times. we should double down on our craft and embrace it at least as much as we did before.

I don't think people are being replaced, not the excellent or the just okay ones, not the systems programmers or the product oriented ones, not the T-shaped, B-shaped or O-shaped.

So you know?.. be happy or whatever..
And tell me.. Aren't you glad this wasn't another one of those "AI won't replace programmers but a programmer using AI will" posts?

Insights Workbench: LLMs meet social media

Omar Naguib — Wed, 23 Apr 2025 15:09:45 +0000

With the advancements in in GenAI, as someone who works on a social media product, LLMs felt like they were calling to me.

We had already set out to build some feature involving LLMs, like trendline analysis, spike analysis, and topic clustering.

But i felt there was a calling towards something that was more bespoke, the user is combing through a huge amount of data with a question in mind, or even trying to find a question to ask, how can i help him with that.

The requirements were that it shouldn't be just a generic chatbot interface that isn't capable of showing the user the full context of the analysis, it needed to be very specific to the type of analysis we have.

We also though of building a full on Reporting Agent, capable of building reports on it's own, but the question remained: what are the basic components that that this agent will use to generate these insights, what are the tools that'll make him able to ask questions and craft them into a coherent story to tell.

I went ahead and built the Insights Workbench, my first iteration on an answer to this question, here are the basic functionalities it can do for you:

Get you all data that is relevant to you question (Yes, relevant not just similar).
Discover how data breaks down in relation to some criteria (e.g. attitudes in AI).
Classify your data into distinct classes.
Make an analysis based on a free text question.

While initially developed as an internal tool to iterate on, we were able to imagine it as real integrated feature inside the app, which is now under the works.

The code is publicly available for now and you can check it out here, you can test on your own data provided it matches the schema.

Best of luck!

Spike detection: using simple algorithms to pinpoint analysis

Omar Naguib — Wed, 23 Apr 2025 15:09:12 +0000

Users look at their performance monitoring dashboards and see this:

They can view the numbers and possibly inspect them to see the raw data of any point they choose, but it's really a lot of work. first off, it isn't clear where to look, and secondly, do they have to comb through every comments availiable in the raw data to manage to get some insight?

With AI, this should be changing, which is why we introduced a feature called spike detection and analysis

The point here is that we would pinpoint specific time intervals that we think had an interesting spike in some metric, and then we would be able to understand more about why it happened.

The issue was.. we had no idea how to detect those spikes, and who should do it?
AI team, full stack devs, data engineers?
And what would we even look at to determine if something is a spike or if it's interesting enough that we can get insights out of it.

This is where this demo comes in:

a live preview is available here

First off to answer the question of what do we deem as interesting, here are the decisions I came to,

Our focus is visual, what the user sees as interesting is the same thing we should present an indication over for users to click.
We should focus only on increases, since in the social media domain, sudden increases in engagement or most other metrics would mean that is less data to process and less insights to look into.

the methods

Let me explain a couple of terms i will later use

chart height: chart height is the is the distance from the heights point that the user can see to the lowest.
Maxima: maxima is another words for peaks, it means a point where both the points before and after it are lesser than it in magnitude

Those 2 concepts led me to the main 2 methods of spike detection

#1: Maxima

Global maximum, local maxima, and percentage of local maxima

#2: delta/max threshold

Picking spikes based on their delta to the previous point passes a certain threshold.
The methods are: delta/max, delta/max with look forward and delta forward with dual thresholds.

The demo provides all these methods with their variations and some hyperparameters you can tweak, and we used this demo to engage the stakeholders and decide which one to pick and with what parameter.
You can pick multiple series of real data or artificial function to see how each algorithm performs on different data.

Check it out and Vote here for the algorithm you think is best.

Link to demo webiste

Tool translation: the joy of efficient software

Omar Naguib — Wed, 23 Apr 2025 15:09:04 +0000

A few months back, we got the task of adding Arabic language support into our social media listening tool, which was a hefty challenge, in addition to the part you write how the logic for translation works (we didn't use a localization library), you also have to make sure that logic is applied to all corners of the application.

This involved three main parties, the developer; who had to apply the logic, the QA engineer; who had to ensure that logic is applied correctly and evenly everywhere it was valid, and the content team; who had to write the translated content for all text found in the tool.

Here is the initial workflow, content team went ahead and extracted the text from the tool, managing to extract 600+ pieces of text, and began working on translating them in a google sheet.

I would then build an easy way for them to update our database with their translations.

Now QA had to verify 2 things for every piece of text:

developer has applied translation logic to that text
content team has that piece of text translated

You can imagine how quickly this can turn into an agonizing pit of inefficient communication..

so what's the solution

Developers should already apply the translation logic to every text in the tool using a t function, every time this function is called it tries to find some text in the dictionary, and return the result if found (and the original if not)

This means we could already extracted all untranslated text without the need for manual scanning.

This way of automated scanning managed to get 7000+ pieces of text, more than 1000% increase compared to the originally manually extracted number.

Along with adding visual indicators to help QA determine why some text is untranslated, providing an webhook that runs with every edit of the translation sheet, that automatically updates the database, we estimate these enhancements to have saved at least 70% of QA time and a huge amount needless communication.

From PDFMonkey to Aim Monkey: Building internal tools that actually help

Omar Naguib — Tue, 22 Apr 2025 15:58:12 +0000

One of the first features i worked on when starting my career was AIM's pdf generation tool. It was time to migrate off of PDF monkey's SaaS product to our own solution. we had to figure a way of maintaining the same templates we used with PDF moneky but reverse engineering the server side logic, this was quite the challenge on it's own, we managed to eventually do it but ended up with a extra friction and huge loss of productivity.

The downgrade

PDF monkey offered a developer portal, where you could have a side by side view of the template code you were working on, and a preview of the pdf on the other side.

It had it's own cons (long waiting time, frequent errors, etc..), nevertheless losing it was a huge blow do developer productivity.

Now there was no way quick way to preview the results of your template code as you wrote it, the only apparent way running the manually every time.

There were also no history of reports generated were you could quickly get test data from.

Developers need a tool where they could develop, test, iterate, commit. all things that were provided by PDF monkey

If it exists, it's doable

After successfully replacing the functionality of being able to generate pdfs from liquid templates, I was confident i could replace the great DX experience they offered was an even better one, here is how i did it.

The challenging components

In the backend

To generate a pdf, we first combine report data with the liquid template code, generating an html page. Which we then transform into a PDF using a headless browser with puppeteer.
Templates are just text files which we can edit and read with node's file system operations.
Allowing the result to be returned as either html or pdf, Will allow switching between quick previews or final (but slower) previews. ## In the frontend
We need a text editor, thankfully there are lots of available open source editors that can be used in the web, of those i picked the ACE editor.
Displaying the html preview could be simply done with an , simple and quick without any need for packages.
Displaying PDFs could be done with react-pdf, a wrapper around Mozilla's pdf.js, a pdf viewer for the browser. # And here is how it came together

The benefits

I got to do it!
Way faster previews 30s -> 200ms, that's 150x, Lots of time and frustration saved with better DX.
Eliminated quotas imposed by the previous SaaS, and prevented timeout issues, both previously out of our control.
Saved some money.
The ability to run this app locally, allowed us to introduce version control, being able to easily commit, revert and use git to our benefit.
This experience led to ideas that greatly helped the occurrence of user reported issues. (we made decision that reversed some of our tech debt).

Finally

We managed to make this migration into something that fit us better, and lead to better decisions and use of our time.

Using Aria DevTools to improve accessibility

Omar Naguib — Wed, 25 Oct 2023 07:49:48 +0000

Accessibility involves putting yourself in others' shoes. You might be surprised that this is a challenging endeavor.

Luckily, there are tools out there that help us get closer to understanding how people with disabilities can use the web. ARIA DevTools is one of them, It compiles a visual representation of the website that brings a new perspective and helps you build more accessible website.

With ARIA DevTools you see your website the way screen readers present it to the blind users. All page elements are presented according to their explicit or implied ARIA roles.

Here is a representation of the MDN website that showcases beautifully accessible Markup.

In this article I will share my experience with ARIA DevTools and how used it to make my website better.

Using ARIA DevTools

When I first learned of this extension, I was my website was going to look good in them and was eager to test it.
After all, i knew about semantic HTML and i always wrote alt text.

To my disappointment, this is how it looked:

Apparently, there was some work to do. I wanted my website too look more like MDN's.

Making improvements

A question that popped in my mind was, "Can I even do this? or this an incredible feat that only experienced developers can do?"

what did my markup need so it can look good and have a clear nested architecture?

Using ARIA DevTools made the needed improvement much more clearer, with further analysis i realized the following:

my projects should be wrote as a list, this makes for much better semantics.
for an element to be recognized with that blue color it needed 2 things:
1. be a semantic html tag (header, section, article ..etc).
2. have an aria-label.
I noticed some alt text that was incorrect or that needed to be more descreptive.

This is a simplified version of some of the changes; it went from this:

<section>
    <div class="projects">
        <div class="project">
            Project content
        </div>
    </div>
</section>

to this*:

<section aria-label="section-label">
    <ul class="projects">
        <li style="display: contents;">
            <article class="project" aria-label="project-label" aria-description="description">
                Project content
            </article>
        </li>
    </ul>
</section>

*: note the use ofdisplay: contents which allows for adding a list element layer without breaking the already written CSS.

And here is the final result:

Looks a lot better!

Quick note

I learned about ARIA-DevTools from this Frontend Roadmap discussion.