Forem: Ahmed Zeno

A Day at AWS Summit Hamburg 🇩🇪 – Innovation, AI, and Unforgettable Experiences

Ahmed Zeno — Fri, 06 Jun 2025 20:19:28 +0000

Yesterday, I had the pleasure of attending the AWS Summit in Hamburg, Germany, and it was an experience to remember. The event was impeccably organized, drawing a diverse crowd of tech enthusiasts, startups, industry leaders, and cloud innovators. The atmosphere was electric, filled with curiosity, collaboration, and cutting-edge technology.

The Dominant Theme: Artificial Intelligence & Generative AI

As anticipated, Artificial Intelligence (AI) was the centerpiece of the summit. From keynotes to breakout sessions, the discussions revolved around how AI and Generative AI are transforming industries. AWS showcased tools like Amazon Bedrock, SageMaker, and AWS Inferentia, which are making it more accessible for organizations to build, train, and deploy AI models at scale.

One of the standout sessions was "Gen AI in action: From POC to business value", highlighting real-world applications of generative AI and its tangible benefits for businesses.

🚗 How BMW Is Using Agentic AI with AWS — A Glimpse into the Smart Factory

One of the most fascinating enterprise use cases I came across at the AWS Summit was from BMW. They’re not just using AWS for infrastructure — they’re building AI-powered, agent-driven systems that are transforming how their factories work.

BMW is working with Agentic AI models — basically, AI agents that can reason, plan, and act independently across complex industrial environments. These aren't just chatbots or simple automations. Think of them as intelligent assistants that:

Monitor factory equipment in real time
Analyze potential production issues before they happen
Coordinate logistics
Even suggest optimizations on the fly

All of this is made possible through AWS services like:

AWS IoT for device connectivity
Amazon SageMaker for training AI models
Bedrock for integrating foundation models securely
And Step Functions to orchestrate these AI agents with logic flows

It was incredible to see how BMW is bringing the concept of the “smart factory” to life — using AI agents to create self-optimizing, adaptive, and resilient manufacturing lines.

The most impressive part? These systems aren’t just internal — BMW is designing them to be scalable and modular, so they can be applied across different factories and workflows worldwide.

This is what Agentic AI looks like in the real world. Not hypothetical. Not futuristic. Just smart, pragmatic AI that actually gets things done.

⚽ Bundesliga & AWS: Revolutionizing Football with AI

A particularly fascinating case study was presented by the Bundesliga, Germany's premier football league. They demonstrated how they're leveraging AI and image processing through AWS to enhance both player performance analysis and fan engagement.

By utilizing real-time video analysis, the Bundesliga can:

Track player movements with precision
Generate tactical insights for coaches and broadcasters
Create personalized match highlight reels
Offer interactive 3D replays for fans

This integration of AI is not only transforming the way the game is played and analyzed but also how it's experienced by millions of fans worldwide.
you can know more on this

🕹️ AI-Powered Kicker Table: A Glimpse into the Future

One of the most intriguing demos I encountered was an AI-powered kicker (foosball) table. At first glance, it appeared to be a standard game table, but a closer look revealed a mounted camera equipped with real-time image processing capabilities.

This setup could:

Detect ball movement
Count passes and shots per player
Analyze player strategies and reaction times

While it was a fun and engaging demonstration, it served as a powerful example of how image processing and AI can be applied to various industries, from manufacturing to healthcare, by providing real-time analytics and insights.

Watch demo

🛍️ Transforming Online Shopping with AI Avatars

Another groundbreaking innovation was showcased by the AWS Lab, presenting a new approach to online shopping experiences. The demo allowed users to upload a full-body photo or video, and the AI would generate a personalized avatar.

For instance, imagine a 20-year-old named Sara uploading her photo. The AI would create a video of Sara trying on different outfits, showcasing how each garment fits and moves. She could easily switch between clothing items—be it dresses, jeans, or accessories—by simply dragging them onto the canvas. Within moments, a new video would be generated, displaying Sara in the selected attire.

This technology has the potential to revolutionize e-commerce by providing customers with a more interactive and personalized shopping experience, reducing the uncertainty of online purchases.

🎥 Watch the Shopping Experience Demo

Here’s a short clip I took from the AWS Lab booth showing how the AI generates a digital avatar trying out clothes:

🎉 Exceptional Event Planning & Entertainment

Beyond the tech showcases, the event organizers went above and beyond to ensure attendees were entertained and well-catered to. Some memorable highlights included:

A giant spinning wheel installation, symbolizing the idea of being "in the cloud," offering attendees a fun break and photo opportunity.
Various games and activities, from classic arcade games like Pac-Man to AI-based VR gaming experiences, providing a blend of nostalgia and innovation.
An array of food options, including ice cream trucks, doner kebab stands, croque vendors, and a variety of sweet treats, ensuring everyone was well-fed and energized.
A unique booth featuring a comic artist who would draw attendees as characters and print them as stickers—a delightful keepsake from the event.

And, of course, no tech event is complete without swag. The summit didn't disappoint, offering a plethora of branded merchandise that attendees were excited to collect.

🌱 Startups Leading the Charge

The startup ecosystem was vibrant, with numerous emerging companies showcasing innovative solutions built on AWS infrastructure. Some notable mentions include:

GreenMetric: Utilizing AI to optimize urban traffic flow and reduce emissions.
VoiceBridge: Offering multilingual real-time support through LLM-powered speech translation.
NeuroVisionTech: Enhancing workplace safety using computer vision and predictive analytics.
VividLoop: Delivering ultra-personalized e-commerce journeys through real-time behavioral data.

These startups exemplify how cloud technology and AI are empowering new businesses to innovate rapidly and scale efficiently.

💬 Final Thoughts

Attending the AWS Summit Hamburg was an enlightening experience. It was inspiring to witness firsthand how AI and cloud technologies are being harnessed to drive innovation across various sectors. The event seamlessly blended informative sessions with engaging activities, making it both educational and enjoyable.

Kudos to AWS and all the organizers for orchestrating such a memorable event. I'm excited about the future of technology and look forward to seeing how these innovations continue to evolve.

If you're exploring AI, computer vision, or building with AWS, I'd love to connect and exchange ideas!

AWSSummit #AWSHamburg #AI #GenerativeAI #ComputerVision #Innovation #Startups #Ecommerce #CloudComputing #TechEvents #DigitalTransformation

The Trickiest Interview Question I Never Saw Coming

Ahmed Zeno — Wed, 28 May 2025 10:22:20 +0000

I remember that once i had a job interview where things were going well, and then came the last question — the kind that really sticks with you.

The interviewer leaned back and asked,"So, how many windows are there in Berlin?"

Caught off guard, I looked at them and asked, “Windows like Windows vs Mac, or windows like doors and windows?”

They laughed and clarified, “Windows like windows and doors.”

At that moment, I realized this wasn’t about windows at all. It was a test — not of my general knowledge or trivia skills — but of how I handle ambiguity, how I think, and how I break down problems with missing data.

So, I took a deep breath and started doing what I do best: breaking it down.

Here's how I approached it:

Assumption 1: Berlin has about 4 million residents.
Assumption 2: Let’s say 3 people on average live in one apartment — that gives ~1.33 million residential units.
Assumption 3: Each apartment might have around 6 windows. That’s ~8 million residential windows.

But that’s just the beginning.

Non-residential buildings: Offices, schools, government buildings, fire stations, train stations — these might account for 30-40% of the total built area.
Assumption 4: Let's assume 40% of total windows are in non-residential buildings. So that’s another ~5.3 million windows (40% of the total so far, 8M / 0.6 * 0.4).

Then there’s more:

Car windows? Berlin has over 1 million registered vehicles. Assuming 6 windows per car on average, that's another 6 million windows.
Buses, trains, trams: Public transport counts too. Let’s roughly add another 2 million.

By then, I was sketching all of this out with pen and paper — no Mac calculator, no fancy tools. The interviewer smiled and said, "There’s no right answer."

I landed on around 24 million windows. Could be off by a lot — and that’s okay.

Why do interviewers ask questions like this?

They’re not testing if you know the number of windows in Berlin. They’re testing:

Can you stay calm under uncertainty?
Can you estimate based on assumptions?
Can you explain your thought process clearly?
Do you get flustered or do you start building a solution, even with limited info?

This type of question is common in product roles, data, consulting, and tech interviews — where problem-solving is core to the job.

How to structure your answer to questions like this:

Clarify the problem: Ask what kind of "windows" we’re talking about.
Make clear, reasonable assumptions:

*   Population

*   Household size

*   Window count per unit

*   Non-residential ratio

*   Cars and public transport

*   Other structures (warehouses, greenhouses, etc.)

Break it into categories: Residential, commercial, transport, public buildings.
Estimate with numbers: Don’t aim for perfect. Just reason it out.
Summarize your result and acknowledge the margin of error.

Final thoughts:

If you ever face a question like this in an interview, don’t panic.

Remember:

It’s not about being right. It’s about how you think.
Stay calm. Start with assumptions. Break it down.
Be transparent in your logic and walk them through your reasoning.
Don’t rush. It’s okay to take a minute to think or even sketch.

The real test is: Can you make sense out of chaos?

This was one of the most fun and challenging moments I’ve had in an interview — not because I knew the answer, but because I had the chance to show how I solve problems when there’s no clear path forward.

What’s the most unexpected interview question you’ve been asked?

🧠 AI Agents Are the New DevOps: How Autonomous Agents Are Redefining Software Engineering

Ahmed Zeno — Fri, 23 May 2025 09:50:24 +0000

TL;DR: AI agents are no longer just hype—they’re becoming the autonomous co-pilots of software development, testing, deployment, and operations. Think ChatGPT meets Jenkins, but smarter, faster, and way more autonomous.

🚀 The Rise of AI Agents
If 2023 was the year of generative AI, 2024–2025 is shaping up to be the era of autonomous AI agents—software entities capable of reasoning, planning, and executing multi-step tasks with little to no human input.

What is an AI Agent?
An AI agent is a system that can:

Perceive its environment (e.g., system logs, user feedback)

Reason about what actions to take

Act autonomously based on goals

In short: They don’t just answer questions—they do things.

Imagine asking your agent:
“Deploy this app to production, monitor for issues, and rollback if errors spike.”
And it actually does all of that. 🔥

🛠️ The DevOps Evolution: From Pipelines to Autonomous Workflows
Traditional DevOps tools (like Jenkins, CircleCI, ArgoCD) are built around static pipelines. But today’s environments demand dynamic, self-healing, and proactive systems.

“What if your next junior developer wasn’t a person, but an AI agent that commits code, debugs, and writes tests — autonomously?”

🤖 What Are AI Agents?
AI agents go far beyond simple chat-based assistants. They're self-directed entities powered by LLMs (like GPT-4.5 or Claude 3), and they perform complex software engineering tasks like:

Cloning a repo

Setting up environments

Making code changes

Writing & executing tests

Opening PRs with documentation

These agents follow structured workflows and use tools like:

🛠️ Code interpreters

📦 Package managers

🔍 File system readers

🧪 Testing frameworks

🔗 GitHub APIs

They’re like mini-developers, but tireless, reproducible, and scalable.

🧬 The Agent Stack
Here's what a modern AI Agent stack might look like:

+-------------------------+
|        User Input       |
+-------------------------+
|       Task Planner      |
+-------------------------+
|  Reasoning LLM Engine   |
+-------------------------+
| Tool Executor (Python)  |
| Terminal / GitHub API   |
+-------------------------+
|       Memory Store      |
|   (Weaviate / Redis)    |
+-------------------------+

Popular frameworks fueling this include:

🦜 LangChain

🕸️ AutoGen

🔧 AgentOps

⚡️ SuperAgent

🚀 Real-World Use Cases
Pull Request Automation
AI agents review PRs, suggest changes, or even make hotfixes directly to codebases. GitHub’s Copilot Workspace is a notable example.

DevOps & CI/CD
Automating infrastructure changes and deploying via agents that “understand” Docker, Kubernetes, and cloud APIs.

Codebase Refactoring
Ask an agent to “convert this repo from JavaScript to TypeScript” — and watch it go to work.

Legacy Code Understanding
Agents can read through monolithic codebases and generate modern documentation or refactor code to modular microservices.

🔥 Why Is This Trending?
AI agents have crossed the hype-to-reality line. Recent improvements in:

Long-context LLMs (100K+ tokens)

Tool calling & function chaining

Multi-agent collaboration (a “team” of agents)

Custom tool integrations

...have enabled these systems to become practical — not just theoretical.

🧑‍💻 Hands-On: Create a Simple AI Dev Agent
Here’s how to build a minimal AI coding agent using LangChain + OpenAI:

npm install langchain openai

import { initializeAgentExecutor } from "langchain/agents";
import { OpenAI } from "langchain/llms/openai";
import { SerpAPI } from "langchain/tools";

// Init model
const model = new OpenAI({ temperature: 0 });
const tools = [new SerpAPI()];

const executor = await initializeAgentExecutor(tools, model, "zero-shot-react-description");

const result = await executor.call({
  input: "Generate a Python function to fetch weather data using OpenWeatherMap API",
});

console.log(result.output);

🚀 Result: You get fully working code and docs, generated through reasoning.

🧭 Future Outlook
AI-first Engineering Teams: One senior + a fleet of agents.

Human-Agent Pair Programming: IDEs like VS Code integrating live agent assistants.

Open-Source AgentOps: Managing fleets of agents like we do with Kubernetes pods.

AI Agents LLM-powered autonomous tools for complex tasks
Key Frameworks LangChain, AutoGen, SuperAgent
Use Cases Coding, refactoring, PRs, DevOps
Future Trends Human-agent collaboration, AI-native engineering stacks

🎯 Closing Thoughts
Autonomous AI agents are not here to replace developers. They are here to elevate your workflow — freeing you from boilerplate and giving you superpowers.

Are you ready to deploy your first AI dev agent?

Let me know in the comments or connect with me on GitHub — I’d love to hear how you’re using AI agents in your stack.

📌 Bonus Resources:

Microsoft AutoGen – Multi-agent framework for building collaborative AI agents.

LangChain Docs – Documentation for building with LangChain's agent and tool abstraction.

AgentOps Playground – A platform for testing, managing, and deploying AI agents in production.

OpenDevin (Open Source AI Dev Agent) – An open-source project to build an autonomous developer agent that works with your local environment.

🚀 Why You Should Definitely Use Next.js in 2025 — From MVPs to Production

Ahmed Zeno — Thu, 15 May 2025 08:49:12 +0000

Whether you’re building the next unicorn startup, revamping an enterprise-grade dashboard, or simply trying to land that dream frontend job — Next.js has your back. With its latest updates, Next.js is not just a framework — it’s your best friend in modern web development.

🌟 What Makes Next.js So Special? Next.js started as a React meta-framework focused on SSR (server-side rendering). Fast forward to 2025, it’s evolved into the de facto standard for serious frontend work — used by everyone from indie hackers to Fortune 500s. Why?

Zero-config, full power: Routing, image optimization, SEO, and more baked-in.

Hybrid rendering: Choose SSR, SSG, ISR, or client-side — per page or even per route segment.

App Router: File-based routing meets server components, layouts, and streaming.

First-class TypeScript support: No boilerplate, no hassle.

Fast refresh + DevTools: Live updates, debugging, and profiling made joyful.

🧠 What’s New in Next.js 14 & 15? The latest versions are nothing short of game-changing. Here are highlights:

✅ Server Actions No more complex APIs for simple logic. Handle mutations directly in your server components. Clean and secure.

'use server'
export async function createPost(data) {
  await db.insert(data)
}

📂 App Router & Layouts Full control over route nesting, layouts, and page structure.

Nested layouts = maintain state between pages.

Streaming = faster loading experience.

React Server Components = less JavaScript sent to client.

⚙️ Turbopack (beta) Webpack is out. Turbopack is in. It’s fast, Rust-based, and native to Next.js. Goodbye long build times.

🖼️ Image & Font Optimization Image optimization is now automatic and even smarter. Font loading is faster and privacy-friendly (no Google Fonts call if local).

🧪 Middleware and Edge Functions Want personalized experiences at scale? Edge middleware lets you run logic close to your users for geo-based rendering, A/B testing, auth, and more.

💼 Why Next.js Is a Job Hunter’s Secret Weapon Here’s why adding Next.js to your resume is like adding rocket fuel to your job search:

Most companies already use it — so you’re job-ready on day one.

It proves you’re “beyond just React” — you understand routing, rendering strategies, and performance.

Great for portfolio projects — fast setup, beautiful DX, and SSR for SEO (recruiters will actually find your site!).

🛠️ Why It’s Perfect for Both MVPs and Large Projects For MVPs: You get routing, API routes, Tailwind, and deployment to Vercel — out of the box. You’ll ship in days, not weeks.

For Complex Apps: Advanced data fetching, modular architecture, caching, edge logic, internationalization — it scales as you do.

🌈 Ready to Level Up? Let Next.js Be Your Superpower Next.js is more than a framework. It’s your shortcut to performance, polish, and professionalism. Whether you’re freelancing, interviewing, or scaling your app to thousands of users — it’s built to help you succeed.

The “Dead Horse Theory”

Ahmed Zeno — Thu, 15 May 2025 08:43:30 +0000

The “Dead Horse Theory” is a satirical metaphor that illustrates how some individuals, institutions, or nations handle obvious, unsolvable problems. Instead of accepting reality, they cling to justifying their actions.

The core idea is simple: if you realize you’re riding a dead horse, the most sensible thing to do is dismount and move on.

However, in practice, the opposite often happens. Instead of abandoning the dead horse, people take actions such as:

Buying a new saddle for the horse.
Improving the horse’s diet, despite it being dead.
Changing the rider instead of addressing the real problem.
Firing the horse caretaker and hiring someone new, hoping for a different outcome.
Holding meetings to discuss ways to increase the dead horse’s speed.
Creating committees or task forces to analyze the dead horse problem from every angle. These groups work for months, compile reports, and ultimately conclude the obvious: the horse is dead.
Justifying efforts by comparing the horse to other similarly dead horses, concluding that the issue was a lack of training.
Proposing training programs for the horse, which means increasing the budget.
Redefining the concept of “dead” to convince themselves the horse still has potential.
The Lesson:

This theory highlights how many people and organizations prefer to deny reality, wasting time, resources, and effort on ineffective solutions instead of acknowledging the problem from the start and making smarter, more effective decisions.

Difference between POC, Prototype, Pilot and MVP!

Ahmed Zeno — Sun, 07 Feb 2021 19:55:53 +0000

We are using this terms in our meetings or workshops, Sprint planning and Features discussions. and i noticed that a lot of people don't understand the difference between them so i decide to shade some lights and explain them quickly here.

1) Proof of concept(POC)

A proof of concept often involves a small exercise to test the real-world potential of an incomplete idea. This isn’t about delivering the idea, but demonstrating whether it is feasible. It should be used in the early stages when you first have an instinct about an idea. A proof of concept shows if a product, feature or system can be developed.

for example, We had a request from our marketing team where they where using some tool to manually upload some images and videos to some marketing partners (Facebook for example) and their request was to find a way so we automate the process without the need to the user interaction and authentication of the 3rd party. the proof of concept was written code to test the FB Api to allow a user agent code to behave on behalf of the normal user.
we wrote simple code do a couple of test and then proofed that its working and its possible.

2) Prototype

A prototype is the visible, tangible or functional manifestation of an idea, which you test with others and learn from at an early stage of the development process.

for example , We wanted to develop a tool for our marketing department, they were not sure about what they really need, also we didn't want to start developing on un-certin and sold ground, so we decide to give them Prototype where we used simplified UI tool and relay on Browser database(IndexedDB), where we able to give them a version that they can use to verify what they really want.
By doing so , we where able to put every stakeholder involve in this App on the same page and giving him the ability to demonstrate his needs and concerns.

Prototypes should be used when you have a hypothesis about a solution, but there is still uncertainty about how it looks, feels and works. Insights from testing can then be used to improve the idea. By developing and improving the prototype, you can maximise what you learn and refine your idea. This helps you move from a version with little detail or functionality (like a rough draft that illustrates the idea) to a version with much more detail and functionality (giving test-users a better sense of how it works).

3) Pilots

Pilots are often used as the first stage of a new policy or service rollout.
Pilots should be used when you believe you have an effective solution and are looking to iron out the creases and understand how it works in reality. By offering a partially implemented concept to a limited segment of users, it is possible to see what actually happens.
This is useful when preparing to scale a solution to a wider group. Pilots, however, are ultimately measured by success or failure, and there is usually only room to make minor tweaks.

4) Minimum Viable Product (MVP)

An MVP allows you to accelerate your learning about a possible solution whilst using minimal resources. It does this by testing only the essential core of your concept (rather than the full solution) with real users in practice. This means that you can find out early on if there is an actual need or demand for the solution, what is working and what isn’t, and make any adjustments accordingly.

for example, Game development companies do a lot of MVPs where they do tests on specific amount of populations or users. to study and Analysis possible Future products in an early stages.

Proof of concepts and prototypes are usually developed and tested within a controlled environment – such as in a workshop or lab workplace – although some prototypes are tested out in the field. Pilots and MVPs, on the other hand, are usually tested in the real world.

this table show the usages criteria

references and credits goes to this nice Artikel here: https://www.nesta.org.uk/blog/proof-of-concept-prototype-pilot-mvp-whats-in-a-name/

i hope this explanation might help you with your next project.
thanks

Console/Terminal Messages styling done right. Introducing CHALK

Ahmed Zeno — Wed, 27 May 2020 17:40:09 +0000

Did you face a situation where you wanted to show console messages with different colors ?

Yeah it can be done easily in the browser!

example,On Chrome & Firefox you can add CSS in console.log messages

like this

console.log('%c%s','background: #c7c7c7; color: #fdfd10; font-size: 24px;' , 'This could be you warning message with Gray background');

console.log('%c%s','background: #222; color: #13ff1c; font-size: 24px;' , 'This could be you Success Message with black background');

NICE....

You can wrap it as a function that takes the console message type and apply styling before logging that :-

const logMessage =(message, mType) =>{
  let color    = "black";
  let bgColor  = "white";
  let fontSize = "12px";
     switch (mType) {
         case "warning":  
              color = "yellow";
              bgColor = "Gray";
              fontSize ="30px";
              break;         
         case "info":     
               color = "gray";
               bgColor = "cyan";
               fontSize ="30px";
              break;
         case "error":   
              color = "red";
              bgColor = "blue";
              fontSize ="30px";
              break;
         case "success":  
              color = "green";
              bgColor = "pink";
              fontSize ="30px";
              break;
     }

     console.log(`%c${message}`, `color:${color}; background-color:${bgColor}; font-size:${fontSize};`)
}

logMessage('Test Warning Message:', 'warning')
logMessage('Test Info Message:', 'info')
logMessage('Test Error Message:', 'error')
logMessage('Test Message Success:', 'success')

Another nice way to console complex data is to use the console.table:-
Lets say that you have an object and you wanna check it in the console in an understandable nice way then the console table is the answer

const employee ={name:"Ahmed",age:"36",country:"Jordan"};
console.table(employee);

OK ok... thats cool and nice but what about the terminal ?

Will Meet CHALK ,
https://www.npmjs.com/package/chalk

A very nice npm package that allow you to style the console messages
it support nested styling.

really easy to use: just import the package and call chalk.neededColor
inside your console.log() statement

const chalk = require('chalk');
console.log(chalk.blue('Hello world!'));

it allows for a lot of stuff

// Combine styled and normal strings

log(chalk.blue('Hello') + ' World' + chalk.red('!'));

// Compose multiple styles using the chainable API

log(chalk.blue.bgRed.bold('Hello world!'));

// Pass in multiple arguments

log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));

// Nest styles

log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));

Its Also allow you to define your own them , just like what did we do with our previous logMessage function

const chalk = require('chalk');
//define message type and reuse them whenever you want
const warning = chalk.bold.yellow;
const info = chalk.bold.blue;
const error = chalk.bold.red;
const success = chalk.bold.green;

console.log(warning('Warning!'));
console.log(info('Info!'));
console.log(error('Error!'));
console.log(success('Success!'));

here is an example of last message of my terminal today

I hope You Like it

Writing A Nested Checkbox Component with React / React-Admin

Ahmed Zeno — Sat, 02 May 2020 13:22:27 +0000

so i was searching for a quick plugin to show nested checkbox for my react project and unfortunately most of what iv'e found wasn't as i was expecting, at-least for my needs.

i wanted to create a checkbox with network name and its has instances as children checkboxes , if u click on the network it will work as a toggle button to select all instances within this network, while you still have the option to select instances individually and if all instances were selected change the network to checked u know the usual toggle behaviour.

so i decide to write a quick one and thought it might be handy for some of you guy.

ill show 2 nested checkbox here one using react with redux and the 2nd will use a react-admin component

first ill create some dummy data:-
this is an array of objects that have network and instances

const networks = [{
        name: "Network_A",
        id: 1,
        instances: [{
                id: 0,
                instanceName: "Instance_1"
            },
            {
                id: 1,
                instanceName: "Instance_2"
            }
        ]
    },
    {
        name: "Network_B",
        id: 33,
        instances: [{
                id: 0,
                instanceName: "Instance_1",
            },
            {
                id: 1,
                instanceName: "Instance_2",
            },

            {
                id: 2,
                instanceName: "Instance_3",
            }
        ]
    }
]

ok cool now what ?

lets write our class and call it CheckboxesGroup
the class will use some ready controllers from material-ui

like this

import React from 'react'
import FormLabel from '@material-ui/core/FormLabel'
import FormControl from '@material-ui/core/FormControl'
import FormGroup from '@material-ui/core/FormGroup'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import FormHelperText from '@material-ui/core/FormHelperText'
import Checkbox from '@material-ui/core/Checkbox'
import {PropTypes} from 'prop-types'
import { Field } from 'redux-form'

class CheckboxesGroup extends React.Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        instances: PropTypes.array.isRequired
    }

    constructor(props) {
        super(props)

        this.classes = {
            root: {
                display: 'flex'
            },
            formControl: {
                margin: '3px',
                float: 'left'
            }
        }
        const networkName = props.name

        const instances = props.instances.map(item => {
            return {name: item.instanceName, value: false}
        })

        this.onChange=props.onChange

        this.state = {
            networkName,
            checkedAll: false,
            instances
        }
        this.handleChange.bind(this)
    }

    render() {
        const {checkedAll} = this.state
        const checkboxes = this.state.instances.map(i => {
            const instanceName=i.name            
            return (
                <FormControlLabel
                    style={{width: '200px'}}
                    control={
                        <Field name={`${instanceName}`} type="checkbox" component={renderInnerCheckboxField} label="instances" checked={checkedAll || i.value} onChange={this.handleChange(i.name)} value={i.value.toString()}/>

                    }
                    label={i.name}
                    key={i.name + i.value}
                > </FormControlLabel>
            )
        })
        const networkName=this.state.networkName
        return (
            <div className={this.classes.root.toString()}>
                <br />
                <FormControl
                    component="fieldset"
                    className={this.classes.formControl.toString()}
                >
                    <FormLabel
                        component="legend"
                        style={{fontWeight: 'bold', fontSize: '20px'}}
                    >
                        {this.state.networkName}
                        <FormControlLabel
                            label="Select All"
                            control={
                                <div>
                                    &nbsp;&nbsp;&nbsp;
                                    <Field name={`network ${networkName}`} type="checkbox" checkboxes={checkboxes} component={renderCheckboxField} label="Sellect all in" checked={checkedAll} onChange={event => {
                                        this.setState({
                                            checkedAll: event.target.checked
                                        })
                                    }}/>
                                </div>
                            }
                        />
                    </FormLabel>
                    <FormGroup style={{display: 'flow-root'}}>
                        {checkboxes}
                    </FormGroup>
                    <FormHelperText>
                        --------------------------------------------------------------------------------
                    </FormHelperText>
                </FormControl>
            </div>
        )
    }

    handleChange(name) {
        const _this = this
        return function(event) {            
            const instances = _this.state.instances.map(i => {
                if (i.name === name) {
                    console.log(event.target.checked)
                    return {name, value: event.target.checked}
                }

                return i
            })

            _this.setState({
                ..._this.state,
                instances
            })
            setTimeout(
                () => {                    
                    _this.onChange(_this.state)
                },
                500
            )
        }
    }
}


const renderCheckboxField = (props) => {
    const { input, label, meta} = props
    console.log("...custom   ",props)
    return (
        <Checkbox
            label={label}
            {...input}

        />
    )}
const renderInnerCheckboxField = ({ input, label, meta: { touched, error }, ...custom }) => {

    return (
        <Checkbox
            label={label}
            error={!!(touched && error)}
            helperText={touched && error}
            {...input}
            {...custom}
        />
    )}
export default CheckboxesGroup

now you can call it inside you form or any render component
in my case i put it inside a FormTab like this

<FormTab label="Networks & Instances">   
   {networks.map(network =>
       (<CheckboxesGroup {...network} source="networks" key={network.name} />)
   )}

</FormTab>

but after this one i realised that i was complexing things up so , idid a quicker one with simple components from react admin

and here is the one for react-admin

import React from 'react'
import {CheckboxGroupInput} from 'react-admin'i
import {FormSpy , useForm} from 'react-final-form'
import {BooleanInput} from 'react-admin'

const Instance = ({record}) => {
    return (
        <div key={record.instanceName} className="instances">
            {record.instanceName + ' - ' + record.name}
        </div>
    )
}


const SelectAllBtn = props => {
    const {network} = props
    const form = useForm()
    return (
        <BooleanInput
            label={network.name}
            key={network.id}
            source={`network.n_${network.id}`}
            onChange={e => {
                let instances = []
                if (e) {
                    instances = network.instances.map(i => i.id)
                }

                form.change('networks.n_' + network.id, instances)
            }}
        />
    )
}

export const NetworkInstances = ({gameNetworks}) => {
    if (gameNetworks) {
        return gameNetworks.map(network => {
            if (network.instances.length > 1) {
                return (
                    <div key={network.name}>
                        <FormSpy>
                            {props => {
                                return (
                                    <SelectAllBtn
                                        network={network}
                                        form={props}
                                    />
                                )
                            }}
                        </FormSpy>

                        <CheckboxGroupInput
                            source={`networks.n_${network.id}`}
                            choices={network.instances}
                            optionText={<Instance />}
                            key={network.id}
                            id={`n_${network.id}`}
                            label={network.name}
                        />
                    </div>
                )
            }

            return (
                <CheckboxGroupInput
                    source={`networks.n_${network.id}`}
                    choices={network.instances}
                    optionText={<Instance />}
                    key={network.id}
                    id={`n_${network.id}`}
                    label={network.name}
                />
            )
        })
    }

    return <div />
}

and just like the previous one you can use it directly in the render
function with passing the source or the api call

<FormTab label="Networks & Instances" path="networks">
                        <NetworkInstances
                            gameNetworks={networks}                            
                        />
</FormTab>

if you have any questions feel free to ask me

How To Cache Your Javascript Functions ? Meet the Memoization Technique!

Ahmed Zeno — Thu, 02 Apr 2020 17:31:00 +0000

First : what was the problem today ?

I had a simple React-Admin form with a Text Input Component (That writes the UserName) and some other components, and this Text input had a validate function which was calling an api and checking if the entered UserName wasn’t already taken.

The problem was that whenever I changed other component values the validate function was triggered , because this is how react admin form works.

And i wanted to have a function that cache the entered username locally and only do the api call if the username wasn’t checked already.

In normal situations this is no problem , you can just manipulate the time to call the validation for example when your component loses focus like using onBlure listener.

However as i said before the react admin behaves in a different way, so i was reading around and i end up reading about Function Memoization

And i thought i should share with you guys what i found and how it worked for me.

So what is Memoization Technique?

Memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

Well i found this great article from this great Author Divyanshu Maithani
On freecodecap.org you can check it here https://bit.ly/3dIfunv

who I am quitting and using some examples from his article to help spread the knowledge.

What does this mean?

Memoizing in simple terms means memorizing or storing in memory. A memoized function is usually faster because if the function is called subsequently with the previous value(s), then instead of executing the function, we would be fetching the result from the cache.

Ok, show me some examples!

Lets say that you have a function that return the factorial of a number
Lets call it getFactorial

function getFactorial(n) {
    // Calculations: n * (n-1) * (n-2) * ... (2) * (1)
    return factorial
}

Great, now let’s find

getFactorial(50)

The computer will perform calculations and return us the final answer, sweet!
When that’s done, let’s find

getFactorial(51)

The computer again performs a number of calculations and gets us the result, but you might have noticed that we’re already repeating a number of steps that could have been avoided.

An optimized way would be:

getFactorial(51) = getFactorial(50) * 51

But our function performs the calculations from scratch every time it’s called:

getFactorial(51) = 51 * 50 * 49 * ... * 2 * 1

Wouldn’t it be cool if somehow our getFactorial function could remember the values from its previous calculations and use them to speed up the execution?
Here’s what a simple memoized function might look like

// a simple function to add something

const add = (n) => (n + 10);
add(9);

// a simple memoized function to add something

const memoizedAdd = () => {
  let cache = {};
  return (n) => {
    if (n in cache) {
      console.log('Fetching from cache');
      return cache[n];
    }
    else {
      console.log('Calculating result');
      let result = n + 10;
      cache[n] = result;
      return result;
    }
  }
}

// returned function from memoizedAdd

const newAdd = memoizedAdd();

console.log(newAdd(9)); // calculated

console.log(newAdd(9)); // cached

Some takeaways from the above code are:

--- memoizedAdd returns a function which is invoked later. This is possible because in JavaScript, functions are first class objects which lets us use them as higher order functions and return another function.

--- cache can remember its values since the returned function has a closure over it.

--- It’s essential that the memoized function is pure. A pure function will return the same output for a particular input no matter how many times it’s called, which makes the cache work as expected.

So how to write a generic memoized function ?

const memoizedFunction = (fn) => {
  let cache = {};
  return (value) => {    
    if (value in cache) {
      console.log('Fetching from cache');
      return cache[value];
    }
    else {
      console.log('executing and fetching results');
      let result = fn(value);
      cache[value] = result;
      return result;
    }
  }
}

Now you can pass your function to this memoizedFunction .
In my case, my function was like this:-

const alreadyExists = async value => {
   return dataProvider
       .getOne(username, {id: value})
       .then(({data}) => (data && data.id ? 'UserName Already Exists' : null ))
       .catch(error => {
           console.log(error)
       })
}

const memoizedUsername = memoizedFunction(alreadyExists);
const validateUsername = [required(), minLength(3),memoizedUsername]

<SimpleForm
   toolbar={<CreateToolbar />}
   redirect="list"
   validate={validateTimeframe}
   validateOnBlur
   submitOnEnter={false}
  >
  <TextInput
       source="voucherCode"
       validate={validateUsername }
   />
.
.
.
</SimpleForm>

So for example

 console.log(validateUsername(SuperHero));
  // calculated and will return null

 console.log(validateUsername(SuperHero));
  // cached and will return UserName Already Exists

 console.log(validateUsername(username1234));
  // calculated  and will return null

Is memoization same as caching?

Yes, kind of. Memoization is actually a specific type of caching. While caching can refer in general to any storing technique (like HTTP caching ) for future use, memoizing specifically involves caching the return values of a function.

What is the limitation of Memoization?

--- In order to memoize a function, it should be pure so that return values are the same for same inputs every time.

--- Memoizing is a trade-off between added space and added speed and thus only significant for functions having a limited input range so that cached values can be made use of more frequently.

--- It might look like you should memoize your API calls however it isn’t necessary because the browser automatically caches them for you. See HTTP caching for more detail.

--- The best use case I found for memoized functions is for heavy computational functions which can significantly improve performance (factorial and fibonacci are not really good real world examples).

--- If you’re into React/Redux you can check out reselect which uses a memoized selector to ensure that calculations only happen when a change happens in a related part of the state tree.

Can we assign css to dynamic Generated Classes? YES we can

Ahmed Zeno — Thu, 27 Feb 2020 08:48:32 +0000

I have a class called .form-123 where the number changes every time the screen is refreshed. Is there a way to define this field (say background-color or margin) in the CSS?

Yes it is possible just by using CSS only, and there is 3 ways to do that

Option #1 - Match by prefix value

Use CSS Class selector ^="class" which select all elements whose class is prefixed by "form-"

example

[class^="form-"] {
  background: red;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}

<div class="box-123"></div>
<span class="box-124"></span>
<article class="box-125"></article>

Option #2 - Match by contains at least one value

Use another CSS class selector *="class" (equivalent to CSS attribute selector) which select all elements whose class contains at least one substring "form-".

[class*="form-"] {
  background: red;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}

<div class="form-123"></div>
<span class="form-124"></span>
<article class="form-125"></article>

Option #3 - Add an additional class to the element, then both those elements will have the class' CSS attributes:

.form-123 {
  background: blue;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}

extra-class {
  background: blue !important;
}

How To Check if a Text Have Weird Characters

Ahmed Zeno — Tue, 03 Dec 2019 18:20:52 +0000

So how to know if ur text have strange characters or not ?

I've got a bug ticket from our QA says that the text style doesn't display as it should be when the language is Japanese.

In the beginning I tried to check the css and played around to find a css solution that supports all browsers and i thought it might be a font issue , then i realised that i need to do some changes on the code, so i decided i should check if the text has this weird cases(alphabets) or not.

so I wanted to do a quick a check if my text include Japanese characters and i ended up using this code.
It usages regular expressions

if(regex.test(input)) {
console.log("Japanese characters found")
}
else {
console.log("No Japanese characters");
}

And it worked for me and I started to understand the issue ,but what if u want to check the other languages like Chinese, Deutsche, Russian …….etc

Ive tried to write another RegExpr and use the .test() with it to get the result

var format = /[ !@#$%^&*()_+-=[]{};':"\|,.<>\/?]/; // ^ ^ document.write(format.test("My@string-with(some%text)") + "
"); document.write(format.test("My string with spaces") + "
"); document.write(format.test("MyStringContainingNoSpecialChars"));

And this one was also good,
The anchors (like ^ start of string/line, $ end of string/line and \b word boundaries) can restrict matches at specific places in a string. When using ^ the regex engine checks if the next subpattern appears right at the start of the string (or line if /m modifier is declared in the regex).

Same case with $: the preceding subpattern should match right at the end of the string.

but it's also include the spaces and counted as strange character so what to do:-

By removing the anchors, and the quantifier *. The * quantifier that would match even an empty string, thus we must remove it in order to actually check for the presence of at least 1 special character (actually, without any quantifiers we check for exactly one occurrence, same as if we were using {1} limiting quantifier).

After some searching for such an issue found article that talking about this issue and it was like this :-

The important thing , you have to define what is the strange or special characters for you :-

All chars other than ASCII chars: /[^\x00-\x7F]/ (demo)
All chars other than printable ASCII chars: /[^ -~]/ (demo)
Any printable ASCII chars other than space, letters and digits: /[!-\/:-@[-`{-~]/ (demo)
Any Unicode punctuation proper chars, the \p{P} Unicode property class:
ECMAScript 2018: /\p{P}/u
ES6+:

/[!-#%-*,-\/:;?@[-]_{}\u00A1\u00A7\u00AB\u00B6\u00B7\u00BB\u00BF\u037E\u0387\u055A-\u055F\u0589\u058A\u05BE\u05C0\u05C3\u05C6\u05F3\u05F4\u0609\u060A\u060C\u060D\u061B\u061E\u061F\u066A-\u066D\u06D4\u0700-\u070D\u07F7-\u07F9\u0830-\u083E\u085E\u0964\u0965\u0970\u09FD\u0A76\u0AF0\u0C84\u0DF4\u0E4F\u0E5A\u0E5B\u0F04-\u0F12\u0F14\u0F3A-\u0F3D\u0F85\u0FD0-\u0FD4\u0FD9\u0FDA\u104A-\u104F\u10FB\u1360-\u1368\u1400\u166D\u166E\u169B\u169C\u16EB-\u16ED\u1735\u1736\u17D4-\u17D6\u17D8-\u17DA\u1800-\u180A\u1944\u1945\u1A1E\u1A1F\u1AA0-\u1AA6\u1AA8-\u1AAD\u1B5A-\u1B60\u1BFC-\u1BFF\u1C3B-\u1C3F\u1C7E\u1C7F\u1CC0-\u1CC7\u1CD3\u2010-\u2027\u2030-\u2043\u2045-\u2051\u2053-\u205E\u207D\u207E\u208D\u208E\u2308-\u230B\u2329\u232A\u2768-\u2775\u27C5\u27C6\u27E6-\u27EF\u2983-\u2998\u29D8-\u29DB\u29FC\u29FD\u2CF9-\u2CFC\u2CFE\u2CFF\u2D70\u2E00-\u2E2E\u2E30-\u2E4E\u3001-\u3003\u3008-\u3011\u3014-\u301F\u3030\u303D\u30A0\u30FB\uA4FE\uA4FF\uA60D-\uA60F\uA673\uA67E\uA6F2-\uA6F7\uA874-\uA877\uA8CE\uA8CF\uA8F8-\uA8FA\uA8FC\uA92E\uA92F\uA95F\uA9C1-\uA9CD\uA9DE\uA9DF\uAA5C-\uAA5F\uAADE\uAADF\uAAF0\uAAF1\uABEB\uFD3E\uFD3F\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE61\uFE63\uFE68\uFE6A\uFE6B\uFF01-\uFF03\uFF05-\uFF0A\uFF0C-\uFF0F\uFF1A\uFF1B\uFF1F\uFF20\uFF3B-\uFF3D\uFF3F\uFF5B\uFF5D\uFF5F-\uFF65\u{10100}-\u{10102}\u{1039F}\u{103D0}\u{1056F}\u{10857}\u{1091F}\u{1093F}\u{10A50}-\u{10A58}\u{10A7F}\u{10AF0}-\u{10AF6}\u{10B39}-\u{10B3F}\u{10B99}-\u{10B9C}\u{10F55}-\u{10F59}\u{11047}-\u{1104D}\u{110BB}\u{110BC}\u{110BE}-\u{110C1}\u{11140}-\u{11143}\u{11174}\u{11175}\u{111C5}-\u{111C8}\u{111CD}\u{111DB}\u{111DD}-\u{111DF}\u{11238}-\u{1123D}\u{112A9}\u{1144B}-\u{1144F}\u{1145B}\u{1145D}\u{114C6}\u{115C1}-\u{115D7}\u{11641}-\u{11643}\u{11660}-\u{1166C}\u{1173C}-\u{1173E}\u{1183B}\u{11A3F}-\u{11A46}\u{11A9A}-\u{11A9C}\u{11A9E}-\u{11AA2}\u{11C41}-\u{11C45}\u{11C70}\u{11C71}\u{11EF7}\u{11EF8}\u{12470}-\u{12474}\u{16A6E}\u{16A6F}\u{16AF5}\u{16B37}-\u{16B3B}\u{16B44}\u{16E97}-\u{16E9A}\u{1BC9F}\u{1DA87}-\u{1DA8B}\u{1E95E}\u{1E95F}]/u

Taming the React Admin Dependency Fields

Ahmed Zeno — Tue, 03 Dec 2019 15:10:52 +0000

Today ticket was to add an (owner name and email fields) in one of our tools.

those owners will come from Cognito-pool that exist within the backend. aside from this a default value should be used and this one comes from the already signed-in User(owner) on the front-end.

I know it sound like hHaaaa

This tool allows you to create a campaign that is used by our marketing team, where they set campaign that holds infos like expanses partners and a lot of other infos.

The campaign was built using react-admin platform
https://marmelab.com/react-admin/

Which is a great open source frontend Framework for building admin applications running in the browser, on top of REST/GraphQL APIs, using ES6, React and Material Design.

The only problem that I usually face with this platform is the BIG documentation and it's most of the times not clear to me where to start and how a specific component really works, what is the params and how it its working under the hood, but after a while I start liking this platform.

Basically the more you use it the more you will realise its fitting and has almost everything you need.

Back to the main task: so i need it to create 2 fields owner name and email and the email should be set automatically once you select the owner name and not to forget the default values incase there was no data or incase of creating new campaign.

In our case the owners was coming from the cognito-pool and not from a database

So I implemented a REST API called list-owners where this one use a lambda function on the backend that reads the cognito pool and return a list of users
As the following:


[
   {
       id: '123',
       name: 'Ahmed Zeino',
       email: 'azeino@company.com'
   },
   {
       id: '124',
       name: 'John doh',
       email: 'jdoh@company.com'
   }
]

Now the front end ,

React admin allows you to use a lot of viewing fields components such as

An example of the usages if AutocompleteInput is like this:-

const choices = [
{ id: 123, owner_name: 'Ahmed Zeino', email: 'azeino@company.com' },
{ id: 124, owner_name: 'John Doh', email: 'JDoh@company.com ' },
];

All of these components have some common properties like the source and reference.

The reference is the path that the api will look for and in our example its /owners as we set this in the rest api.
This will do the request and return the response that has the array of owners

[
   {
       id: '123',
       name: 'Ahmed Zeino',
       email: 'azeino@company.com'
   },
   {
       id: '124',
       name: 'John doh',
       email: 'jdoh@company.com'
   }
]

The react-admin component will use this as a source of data (choices in the AutocompleteInput component )

React admin will inject this data directly with component , without the need to use choices
And the component should display nicely the owners name list.

But the problem lies in the way that you need to display the email on a side field based on the selected owner name , even if there is no relation between those two.

So what to do ?

I solved this by splitting the problem into 3 parts

I need to display a list of owner names and a TextField that display the email.
I need to be able to pass the data coming from the api /owners to those two components.
I should be able to set the default values to these 2 components incase of the first load and in case there is no data yet.

so i did the following :-

I created a custom components called OwnersInput , this component will do the query of the rest api and pass the data to the sub components

and

I wrapped the with a thats allowing me to check the current form fields and allowing me to dispatch a change event that will change specific field of the form.

I'll put the component here and write more explanations on it

export const OwnersInput = ({
   label,
   source,
   reference,
   optionValue,
   user = {},
   formName = ''
}) => {
   const {name: defaultUser} = user
   const {email: defaultEmail} = user

   return (<Query type={GET_LIST} resource={reference} payload={ownersPayload}>
           {({data}) => {
               return (data && (<div>
                           <AutocompleteInput
                               translateChoice={false}
                               choices={data}
                               allowEmpty
                               label={label}
                               optionValue={optionValue}
                               source={source}
                               validate={validateOwner}
                               defaultValue={defaultUser}
                           />
                           <FormDataConsumer>
                               {({formData, dispatch}) => {
                                   const email = getEmail(
                                       formData,
                                       data,
                                       defaultEmail
                                   )
                                   if (
                                       formData &&
                                       formData.owner_email !== email
                                   ) {
                                       console.log('CHANGING EMAIL')
                                       dispatch(
                                           change(
                                               formName,
                                               'owner_email',
                                               email
                                           )
                                       )
                                   }
                                   return (
                                       <TextInput
                                           source="owner_email"
                                           label="email"
                                           defaultValue={defaultEmail}
                                           disabled
                                           style={layout}
                                       />
                                   )
                               }}
                           </FormDataConsumer>
                       <div/>)
               )
           }}
       </Query>
   )
}

When creating this component i am giving it the init user name and email which is already saved in the state - on the front side (based on logged user) and thats how i am creating the default name and default email

I am also passing the reference as reference="owners"
And also the formName ,so i can do the dispatch on the right form
The component will do the query using GET_LIST
For the initial value u can pass it as defaultValue={defaultUser} inside the component
The get email function will check for the form field owner_name and it will grab the needed email after it compare it with the data , if not it will return the default email

Here is the usages inside a create page:-

<OwnersSingleInput
                    reference="owners"
                    label="owner"
                    optionValue="name"
                    source="owner_name"
                    formName="createForm"
                    user={user} // injected from the state
                />

I hope it was a clear and simple explanation ,otherwise feel free to ask me.

just run npm run myscript