DEV Community: Mahmoud Ehab

A Comprehensive Guide to Integrate FawryPay API into your own RESTful API Server

Mahmoud Ehab — Thu, 20 Nov 2025 23:40:24 +0000

This text was originally written on March 12, 2025. As part of my work at LiteSpace, I was responsible for managing the integration of the Fawry API into our application.

These papers provide a brief, but sufficient, exposition of how FawryPay works, how to integrate its payment methods in your back-end software application, how refund works, and how to keep up with transactions status. Moreover, a general architecture that ensures a seamless integration of FawryPay API, with a flexible design that can adapt any other API, is proposed at the end of these papers.

Payment Process Workflow 1.1 Choosing Payment Method 1.2 Collecting Client’s Payment Details 1.3 Submitting Payment Request 1.4 Showing Payment Status
Refund API
Bank Installments
General Architecture Specification 4.1 Entity Relationship Diagram 4.2 System Overview Diagram 4.3 Request Factory 4.4 Details Collector 4.5 Payment Strategy Further Readings

1. Payment Process Workflow

In a nutshell, the payment process involves four steps: choosing payment method, collecting client’s payment details, submitting payment request to the API (e.g. FawryPay), and showing the payment status summary to the client. Each of these steps will be elaborated in this section.

1.1 Choosing Payment Method

This step affects the upcoming procedures of the next steps; for example if payment using FawryPay reference number is selected, then there is no client payment details to be collected, the payment HTTP request to be submitted shall have "paymentMethod":"PAYATFAWRY" in its payload, and the status summary to be shown will be the reference number that shall be used to send money.

1.2 Collecting Client’s Payment Details

According to the selected method in the previous step, the required payment info will vary. As mentioned before, it can be none, in case the selected method is “PAYATFAWRY”. And it could be the user’s payment card info (card number, expiry year, expiry month, and cvv), in case the selected method is “CARD”.

Collecting Payment Card Details

In order to make further payments seamless and easy (for users), we have to collect and store users payment info. However, this is considered an illegal action, if we are not fully PCI compliant. So, a hassle-free approach to achieve this would be using Fawry Card Token API. And this splits this step into two steps: generating a card token (optional), and using/selecting an existing card token (users can have more than one card token).

If the selected method is CARD, and the user chose an existing card token, this will affect the next step by adding the following attribute in the request payload:

{
 ...
 "cardToken": "ac0a1…"
 ...
}

Note: alternatively, “saveCardInfo” field can be used, in the request body, instead of storing tokens, as will be shown in the next section.

1.3 Submitting Payment Request

The body of Fawry payment request is quite verbose, all its required and optional fields are listed and nicely described in the docs. The body slightly differs from one method to the other; meanly, specifying the “paymentMethod” attribute imposes an associated (to the selected method) body structure. e.g. if the “paymentMethod” is “PAYATFAWRY” you don’t have to pass the payment card info into the request body. On the other hand, if it’s “CARD” then the payment card info are required in the body.

In this section you will know the general structure of the request body. And some useful features that you can obtain from its optional fields.

The General Body Structure

Here is a brief list of the body structure, it states only the required fields in all body variants. Most of the fields values type, one can figure out from the name. However, others need some elaboration, for those you will find below a table of their description taken directly from the docs.

{
 "merchantCode": "1tSa6uxz2nTwlaAmt38enA==",
 "merchantRefNum": "2312465464",
 "customerMobile": "01234567891",
 "customerEmail": "example@gmail.com",
 "amount": 580.55,
 "currencyCode": "EGP",
 "language" : "en-gb",
 "chargeItems": [
   {
     "itemId": "897fa8e81be26df25db592e81c31c",
     "description": "Item Descriptoin",
     "price": 580.55,
     "quantity": "1"
   }
 ],
 "signature": "2ca4c078ab0d…",
 "paymentMethod": "PAYATFAWRY",
 "description": "Example Description"
}

Field	Description
merchantCode	The merchant code provided by FawryPay team during the account setup.
merchantRefNum	The unique reference number for the charge request in merchant system.
amount	Must be in the form 0.00 (with two decimals)
signature	The SHA-256 digested for the following concatenated string: `"merchantCode + merchantRefNum + customerProfileId (if exists, otherwise "") + paymentMethod + amount (in two decimal format 10.00) + secureKey"`

Similar to the required fields, the optional varies according to the used “paymentMethod”. For example, “saveCardInfo” which is a boolean value, can be used only when the “paymentMethod” is “CARD”. And it functions along with the “customerProfileId” optional field which will be elaborated in the following table (the general optional fields table).

Field	Description
customerProfileId	The unique customer profile ID in merchant system. This can be the user ID.
customerName	The customer name in merchant system.
orderWebHookUrl	WebHook Url used to notify your application back end when an event happens in this order like order paid, expired or refund

Note: merchant system means your own system; the values in your own database.

Pay attention that the aforementioned fields are general to all body structure variants, this doesn’t mean, in any way, that your request will certainly be valid (not a bad request, 400) when you dispatch it with only these fields. e.g. when you use the “CARD” method, the “returnUrl” field, which is not listed above, is required.

The docs provide code examples for each method; you can navigate to your preferred method from Server to Server APIs section, copy the sample code in your preferred language, modify and use it in your project.

3D Secure Authentication Card Payments

Before moving to the final step, it’s worth mentioning the “enable3DS” field of the body structure variant associated to the “CARD” method.

Normally, when using the “CARD” method and dispatching a request to FawryAPI, it responses with json object like the following:

{
 "type": "ChargeResponse",
 "referenceNumber": "963455678",
 "merchantRefNum": "9990d0642040",
 "orderAmount": 20.00,
 "paymentAmount": 20.00,
 "fawryFees": 1.00,
 "paymentMethod": "CARD",
 "orderStatus": "PAID",
 "paymentTime": 1607879720568,
 "customerMobile": "01234567891",
 "customerMail": "example@gmail.com",
 "authNumber": "12336534",
 "customerProfileId": "1212",
 "signature": "b0ef178e2...",
 "statusCode": 200,
 "statusDescription": "Operation done successfully"
}

However, when the “enable3DS” field is set “true”, another body variant is imposed; you have to supply the body with one more required field: “returnUrl”.

The 3 domains secure (3DS) authentication protocol uses three domains to fulfill the transaction: your server domain, the provider domain (Fawry), and the band domain. First of all, you dispatch the request (with “enable3DS” true) to FawryAPI. Then it responses with a “redirectUrl” that you shall use to redirect the client to. The redirect destination (the bank) then do the authentication process and redirect the client back to Fawry. And eventually, Fawry redirects the client to the “returnUrl” you specified in the first place. Read More

1.4 Showing Payment Status

The final step is showing the payment status, whether it is NEW, PAID, EXPIRED, CANCELED, REFUNDED, or FAILED. And more importantly, informing the user of further procedure he/she shall take to complete the payment process. e.g. when the user make payment with the “PAYATFAWRY” method, a page should be rendered (or a mail should be sent to the client e-mail) with the “referenceNumber” (that shall be used by any FawryPay POS retail store to fulfill the process) and instructions telling the user that he/she should pay an amount of money in any FawryPay POS retail store.

A response body of FawryAPI to a request with the “PAYATFAWRY” method:

{
 "type": "ChargeResponse",
 "referenceNumber": "963455678",
 "merchantRefNum": "9990d0642040",
 "orderAmount": 20.00,
 "paymentAmount": 20.00,
 "fawryFees": 1.00,
 "paymentMethod": "PayAtFawry",
 "orderStatus": "PAID",
 "paymentTime": 1607879720568,
 "customerMobile": "01234567891",
 "customerMail": "example@gmail.com",
 "customerProfileId": "1212",
 "signature": "b0ef178e2f06...",
 "statusCode": 200,
 "statusDescription": "Operation done successfully"
}

On the other hand, to present the payment result in case the method is “CARD”, we may either use FawryAPI charge response and assign it to the “returnUrl” field. See charge response endpoint example, or more convenient, we may use the Get Payment Status API.

The Get Payment Status is just a Fawry endpoint to which we can dispatch an HTTP GET request with the following three query parameters: merchantCode, merchantRefNumber, and signature. Whereas, the signature is the SHA-256 digest value for merchantCode + merchnatRefNumber + secureKey.

https://atfawry.fawrystaging.com/ECommerceWeb/Fawry/payments/status/v2?
merchantCode=is0N+YQzlE4=&merchantRefNumber=23124654641
&signature=a5701a2e1e865bf863f0c781829f709ea4d36bdaf7d70e9bafb9458b1

Fawry Server Notification

Fawry supplies its users (merchants) with an out of the box feature to push notification for every change in any transaction status. And this is done by preconfiguring an endpoint, whilst the registration process, that FawryAPI will dispatch an HTTP post request to automatically on every status update. Read More

2. Refund API

Nothing more can be said rather than the description in the docs: “FawryPay allows you to refund amounts that have previously been paid by customers, returning a unique reference for this request. Refunding can be done on the full captured amount or a partial amount. Payments which have been authorised, but not captured, cannot be refunded.”

Notice that we can refund just a partial amount of the money. Authorized money means pending funds, and it’s called captured once it’s moved from pending to complete.

Refund can be applied by dispatching an HTTP post request to Fawry refund endpoint with a body structure like the following:

{
 "merchantCode" : "1tSa6uxz2nTwlaAmt38enA==",
 "referenceNumber" : "23124654641",
 "refundAmount" : "362.50",
 "reason" : "Item not as described",
 "signature" : "3f527d0209f..."
}

Refund Voucher

What if users have paid with the “PAYATFAWRY” method, how then refund works?

In this case, Fawry merchants shall generate a refund voucher that clients can use to get their money back from any FawryPay POS retail store. However this functionality/feature has not been mentioned in the online docs at the time of writing these papers. You have to contact Fawry support to inquiry about the applicability of refund vouchers.

3. Bank Installments

Likewise, just another variant of the body structure. When an “installmentPlanId” is specified in the aforementioned body structure of the “CARD” method. Then the request will be handled by FawryAPI as a payment with Bank Installment.

However, you must provide Fawry with your installment plans, using your account dashboard. And then you can retrieve them in your application by dispatching a GET request to the endpoint:

https://www.atfawry.com/ECommerceWeb/api/merchant/installment-plans

4. General Architecture Specification

This section proposes an abstract software design solution for the aforementioned system. Workflow, PaymentStrategy, DetailsCollector, and RequestFactory; these are the models that shall be defined in order to express the high-level implementation of the above-mentioned workflow.

Before going through the discussion of each of the mentioned models, we should first delineate our database with and entity relationship diagram.

4.1 Entity Relationship Diagram

The database shall contain at least four entities: users, merchants, invoices, and items. The relations between these entities and their minimal fields (as shown in the diagram below) have been specified to be compliant with the aforementioned implementation in an abstract way; meanly, the DataControllers that will treat this data model as a FawryAPI model, may retrieve the merchant.id as FawryAPI “merchantRefNumber” and the merchant.name as “merchantCode”, invoice.id as “referenceNumber”,… etc.

4.2 System Overview Diagram

The Workflow is defined by its constituents: PaymentStrategy, DetailsCollector, and RequestFactory. So you can write a FawryWorkflow component that extends the abstract one in the sense that it has FawryPaymentMethod, FawryDetailsCollector, and FawryRequestFactory, that in turn extend the abstract defined ones. In more technical sense, the Workflow is a facade design pattern that gives the main script (the server) access to a compatible tools to be used to fulfill a payment process. And moreover, it connects these tools together.

Just as the dependency flow in the real world model, it does in this simulation model; it goes from RequestFactory to DetailsCollector and ends in PaymentStrategy.

4.3 Payment Strategy

This component is responsible of specifying the required data along with its payment method name. If you are working with .Net, for example, you may implement it with static classes and/or type definitions. If you are going to implement it using TypeScript, you will probably just export a bunch of Zod objects.

4.4 Details Collector

This component is responsible of collecting the required data as specified by the PaymentStrategy, in the same Workflow. It can be an html form, a React form component, a function that fetches data from a local storage, or an express server handler to which users dispatch requests to initiate/fulfill payment processes (in this case this component and the RequestFactory will be merged together).

4.5 Request Factory

This component is responsible of forging the final API request that will be dispatched to the payment service provider. At the end of the day, this is what the user (of the system), our RESTful API server, makes use of. The Workflow must be initializing and passing the RequestFactory with the compatible DetailsCollector, therefore the end user can use its functions directly to forge requests. e.g. FawryRequestFactory.payWithCard().

4.6 One Feasible Implementation

One feasible implementation, in TypeScript, for the abstract discussion above is as follows: the PaymentStrategy is just a script or bunch of scripts that export Zod objects. Whereas, the DetailsCollector is a script or bunch of scripts that export URL endpoints for different application forms pages (assuming it’s a web application). Lastly, the RequestFactory is a bunch of express handlers/middlewares that can be used within express handlers to either 1) redirect the user to the required form which in turn will (re)redirect the user to the referer with payment info in the payload, or 2) use the payment info in the found payload, if exists, forge the request body, and finally invoke the (express) next function.

StateFile: A Minimalist Design for Permanent State Management

Mahmoud Ehab — Sun, 07 Jul 2024 05:49:00 +0000

StateFile in Abstract

A StateFile can be abstractly defined as an object that permanently holds a substate of the application.

A StateFile contains and defines the structure of units of data to be hold, it supplies users, as well, with facilities to retrieve, update, or remove data (all, specific or filtered), and it takes control of saving and loading data to and from permanent storage disks. Furthermore, it can crack data into several saved files, and it does it in several means: either by specifying, by the user, a limit on the size of each saved file, by cracking in half the last saved file, or by sealing the current file and add a new one above it.

Lastly, saved files shall have a conventional naming syntax that would facilitate automatically reaching it, and it shall contain a header or a metadata part in it, that contains the name of the substate it belongs to, and the order in which it's been created among other cracks (saved files).

Implementation

I've already implemented it in typescript: cracksdb is an npm package that you can install and try in your project with the command npm i cracksdb

One feasible implementation of the concepts and features mentioned above is concretely discussed in the following sections and illustrated in the diagram below.

Naming Syntax & File Structure
Storing, Loading and Cracking Data
Access and Manipulate Data
Typer
StateManager
FileManager

1. Naming Syntax & File Structure

In this implementation, the physical state file name and the information it contains, or some of, are strictly coupled. First of all, a state file is a JSON file that basically has three attributes: meta, data, and unittype. data is a list of units of data, where each data unit structure shall be in accordance with unittype; meanly it must has, at least, the same fields as unittype. meta is where the coupling established between the name and the contents; it has, at least, two fields (the name of the substate and the crack order), as mentioned before, that are essentailly manifested in the file name. And accordingly, the file name syntax is sf.[order].[substate_name].json.

The prefix sf makes it way easier for a StateFile to look for state files and automatically load the application state. Once a state file is found, it gets validated by checking the order and the substate name in both the file name and its content. Once a state file is validated, it gets loaded by a StateFile object. Last thing to mention, is that the order is involved in the name in order to make it possible for the StateFile to load just the lastest crack of data of the corresponding substate.

2. Storing, Loading and Cracking Data

As much as the implementation discussed above, it's obvious that StateFiles store data in JSON files. This section, furthermore, discusses how exactly a StateFile object shall store, load and crack those JSONs.

Storing & Loading Data

The constructor of a StateFile object has two parameters: one of them is the directory path in which cracks are saved, and the other is the name of the substate. The constructor first checks if any sf.*.[substate_name].json file exists, if some are found then it pushes each one path in a private array cracks_paths, with respect to the order in the file name, and loads the last one by a private loadCrack method. On the other hand, if no sf file is found, the constructor initializes and creates an empty sf file with order equals to zero and unittype to an empty object (that indicates 'any' type).

The loadCrack method, in turn, validates the sf file and then pushes, if the validation yields true, the data attribute list to the private local variable cracks_data of the StateFile (cracks_data is an array of arrays of objects). In case the validation output is false, the method log a warning and doesn't load any data.

Recall that, when StateFile already finds sf files, in the construction phase, it assigns the unittype of the first sf file to the private local variable unittype. In case no file exists, it assigns an empty object instead. Furthermore, we may define a public method for users to extend the unittype. extend method takes parameter of Typer.Type object and extends the local unittype attributes with it. And accordingly, every crack file unittype and data unit in the data list shall be modified.

Cracking Data

Data is cracked or divided by sealing crack files and initializing new ones. A sealed crack file, that has a sealed attribute equals to true in the meta part, deprives storing more data units.

By default, a crack file gets sealed when it reaches a limit of 100 data unit within it. That limit can be changed by users via the method setLimit. Or customly, crack files may be sealed directly by invoking the method seal, or the method split that will seal the last crack file right after moving half of its data unit to a new one.

One final noteworthy propery to mention here is that it's quite reasonable, more reliable, and less error-prone that a StateFile object contains at most one unsealed crack file. And that unsealed crack file shall be the last in the list that leaves behind the old sealed ones.

3. Access and Manipulate Data

Users can retrieve a specifc data unit either by specifying an index or a search condition. In the same manner, users can retrieve a set of units of data, however the first way shall involve a range of two indexes. And for this purpose, four methods may be defined: get(index), getWhere(condition), getList(index, index), and getListWhere(condition). A typical definition or implementation, so to speak, of the search condition parameter might be a lambda function that takes a data unit and returns a boolean value. Furthermore, getIndexOf(condition) returns the index of the first data unit that applies the condition, or -1 in case nothing is found.

Adding data units, updating existing ones values, or removing them... each of these operations corresponds respectively with the methods: add(object), update(index | condition, object), and remove(index | condition); in case an index is provided the method should update/remove only one unit, in case of a condition, on the other hand, it shall update/remove the set of units that meets the condition.

Just one rather subtle feature is left. When data is manipulated, should StateFile writes data automatically on the disk? or should it leave it for the user to manually invoke instead?... simul is another StateFile private local variable of type boolean with true as its default value. When simul is true the StateFile will save data automatically, however, it shall rewrite only the crack file that holds the added/updated/removed data unit. On the other hand, when simul is false, the only way to save data permanently is by invoking the save method which will rewrite all crack files.

4. Typer

In order to store data unit types in json, parse, extend, and compare them, we ought to define a specific class that hardcodes basic types and constructs composite types objects.

Typer is used by StateFile to generate a unittype object, to extend a unittype object, or to check if a specific object applies to a specific type. One straight forward property Typer shall have, in order to implement these three mechanisms, is a hardcoded enumeration of types.

Typer.Type has a recursive definition whereas it's a map from a string to one of the following values: "number", "string", "boolean", and Typer.Type.

5. StateManager

Users can create StateFiles and access them only by using StateManager. A StateManager creates StateFiles with add(substate_name) method and stores it in a local variable. Users can access and remove StateFiles with methods: get(substate_name) and remove(substate_name).

At the construction of StateManager, users shall provide the root directory path for sf files. Given that path, the StateManager explores it and considers every sub-directory, it founds, to be a StateFile directory, which is a directory that's been named after the substate of a StateFile. And accordingly, StateManager constructor invokes the add method with the explored directories names.

Removed StateFiles are only removed from the local variable of the StateManager, however, to remove them entirely from persistence, users may invoke delete(substate_name, passkey) method. The passkey parameter bestows some security for users, so that sf files don't get easly or accedentally deleted. It's compared to the passkey attached in each sf file meta part, if there isn't a passkey in there then the sf file considered undeletable by the StateManager.

6. FileManager

A File object is considered as a virtual file that stores the path of the physical file and its content in local variable. And it contains methods to retrieve, set, and update the content. However, manipulating the content using File methods only happens virtually, it's not persistent.

From here, a FileManager can be simply stated as a collection of File objects with a specified unique name for each of which. Users can create, read, update or remove Files only with the methods provied by FileManager. Furthermore, users can configure files to be written automatically on disk whenever its value change by invoking the method simulFile(file). And can turn it off with unsimulFile(file).

There shall exist only one instance of FileManager that gets passed through StateManager, StateFileFactory, and StateFileContainer. As it's shown in the diagram above.

A Plea for Mature Industry!

Mahmoud Ehab — Fri, 23 Jun 2023 05:19:34 +0000

Storage-Facilities Architecture is an attempt to delineate a general solution for typical problems appertain to web software development. If you browsed the source code of any open-source web application, fully developed using JavaScript in particular, you would probably find that its architecture is brutally shaped by a framework or, even worse, by a library (there are tools proclaimed as libraries, but they are usually used as frameworks in the sense that they specify at least one part of the architecture). Developing a large software project bounded to a specific framework is a pernicious decision which is significantly what led to the wide range of irrelevant, to the art of software development, titles: React Developer, VueJS Developer, ExpressJS Developer, ...etc (“Software Developer” or even “JavaScript Developer” should be sufficient). This article prescribes a general architecture, perceived as a receptacle box in which various frameworks can be plugged, that web developers can implement regardless of what technology will be used in the future.
This article is a plea for mature industry!

Read the full article on Substack:
https://open.substack.com/pub/moehab/p/storage-facilities-architecture

Introduction to Agile

Mahmoud Ehab — Thu, 24 Mar 2022 07:17:52 +0000

Agile is a technique, method, or strategy which is used in software development as an alternative to the traditional methodology. As the name indicates, it seeks to make software development easier and manageable; by applying agile, the team can observe the overall progress of the project development and make better decisions, “User Story, Burndown Chart”, make more maintainable and flexible software “Testing, Refactoring, and Pair Programming”, and produce consistently a free-of-bugs deployable product "Sprints, and Iterative Development" — by using specific practices and artifacts (the italicized text) that we will elaborate later on.

Agile has several methodologies — the prominent ones nowadays are Scrum, Extreme Programming, Lean Software, and Crystal — that follow the same principles mentioned in Agile Manifesto 2001. Accordingly, instead of a single development method (the traditional software engineering), agile provides us with a heap of methods and practices that are established and recommended by professional software engineers with a supreme experience in the field. Moreover, engineers can — and they should — combine between these methods to wind up with the best suitable plan for their project, rather than embracing a single method entirely, as if it’s a tenet!

The following two sections shall give you a satisfying overview of agile, that is neither too brief nor too verbose; since it covers the overall concepts of agile. However, you’ll find more exposition and practice guidance in “Agile!: the Good, the Hype, and the Ugly” book, by Bertrand Meyer, which is the only reference for this article.

Some Agile Terminologies

This section and the following one, could be combined into one concrete section demonstrating agile principles. Actually, the content in this section is a constituent of the following one, however, it has been segregated for demonstrative reasons. You can consider it as an introductory.

Velocity: indicates the project progress pace velocity; how many tasks are accomplished in a sprint (days). It’s used as a virtual artifact to observe the project state, and how the team is going on.
Big Upfront: it’s a derogatorily term used to refer to big steps, that usually ends up paralyzing the project’s velocity.
Sprint: it’s a definite period of time (a development iteration), after which the project should be ready for new version deployment, even with partial functionalities.
ROI: Return Of Investment. A virtual assessment of functions, to decide which functions should be implemented first.
Scenarios: it is a description of a particular interaction of a user with the system. Moreover, it’s considered as a replacement for requirements, while user interaction is definitely more suitable, than collecting requirements (Big Upfront process), in defining tasks. Scenario is a more general term that carries two artifacts: use case, and user story.
Use Case: it is a full run through the system. Observing the scenario from the beginning of starting the application, by the user, to the completion of a certain task(s).
User Story: it is a declaration of small unit of functionality expected by the users. Such as: “As a customer, I want to be able to delete my account”, “As a customer, I want to make some information in my account private”... etc.
Burndown chart: a record of a project’s velocity.
Planning Game: a group estimation techniques which ask the participants to come with initial estimates independently, then examine each other’s estimates and iterate until a consensus is reached.

Agile Principles

The principles are followed from the values, which mentioned in the manifesto, and from these principles each methodology devises its own practices and artifacts, that fulfill the principles and therefore preserve the values.

There are twelve principles mentioned in the manifesto (https://agilemanifesto.org/principles.html). In this section, we are going to discuss, separately, each principle and mention its followed practices and artifacts.

1. Continues Delivery

Our highest priority is to satisfy the customer through early and continuous delivery of valuable software.

Earlier, in traditional software engineering, it wasn't uncommon to split the project into sub-developments and then, at the end of the development or after few months, integrate those constituents all together to institute the whole project. This practice was effective in simplifying the development of the project, however, it was impediment for deployment. It takes much time to fix the bugs and incompatibility between different parts (sub-developments) of the system.

Therefore, agile methodologies advocate CI / CD (Continuous Integration & Continuous Delivery). The sub-developments should be integrated frequently, in order to provide two values: working software and customer collaboration. The first is accomplished, in the sense of fixing bugs and incompatibility as soon as possible, by integrating the parts after few weeks, rather than months (there are methodologies recommend doing it several times a day). Moreover, the later is accomplished by producing working software after each integration to the customer for feedback.

2. Accept Changes and Customer Role

Welcome changing requirements, even late in development. Agile processes harness change for the customer's competitive advantage.

In agile, the customer has a central role in the project development. Rather than documenting the requirements at the planning phase of the project — which considered as a big upfront — we let it evolves as the project develops, by giving the customer a central role that usually concerns in trying intermediate releases of the project. This approach, replacing the requirements or vanishing big upfronts, is almost applied by all agile principles.

3. Working Software

Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale.

Working software is the primary measure of progress.

These two principles may seem redundant of the first one listed in this section. However, the both demonstrates a guideline that our practices shall follow. These two principles telling us that we should always be able and ready to produce and deploy a working software (new version of the application) after each sprint, even if with partial functionality. Neither The deadline can be postponed for deployment, nor the application can be deployed with bugs, because of adding new feature to the application.

So, the primary measure of progress is not how many functionalities have been added. Working software has more priority in agile development, and the software is assured working through the use of test suites.

4. Team Meetings

Business people and developers must work together daily throughout the project.

This principle is, obviously, a practice than it’s a principle. Agile methods advocate frequent face-to-face contact between team members. It helps teams remain cohesive, know what everyone is doing, and spot problems early.

5. Open Rooms and Pair Programming

Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.

The most efficient and effective method of conveying information to and within a development team is face-to-face conversation.

Agile methodologies reject and revolt on cubicles and closed offices. It’s preferable to set up the office as an open room to favor constant interaction between team members. Moreover, a common practice of agile, is pair programming. In which the code is written by one developer, while being supervised or criticized by another developer. This helps catching mistakes or even bad code early.

6. Sustainable Development

Agile processes promote sustainable development. The sponsors, developers, and users should be able to maintain a constant pace indefinitely.

Again, another principle seems redundant; all the previous principles certainly invoke sustainability. However, it may have other meanings or values. This principle refuses putting the team in an exceptional pressure, rather, the developers should work in reasonable hours, preserving evenings and weekends. It could be considered as a revolt on managers, as we may see in later principle.

7. Refactoring and TDD

Continuous attention to technical excellence and good design enhances agility.

To make our software agile, we should create a test for every single code. Concisely, we should not write any new code before creating its unit tests. Therefore, the test comes first then we think about the simplest code that makes that test passes, and we iterate these two steps over and over again, until there is no more test to be passed. In other words, this part of the software we are working on is done. This approach is known as Test-Driven Development.

Eventually, applying TDD winds up with a fragile, messy, and miserable design of the code. And here comes another significant practice in agile, Refactoring. Which is the process of critically examining a design or implementation and applying any transformations that may be needed to improve its consistency. (It may not seem obvious, if one doesn’t know what software design & architecture is)

8. Minimalistic Funcationality

Simplicity--the art of maximizing the amount of work not done--is essential.

The development phase in agile methods should be as simple as possible, as the team must be able to deploy a new version in two weeks! Therefor, the functionalities that need to be done in the next iteration (sprint), must be essential and requested by the customer. So, if the team meeting before the beginning of any sprint “planning game”, winded up with ten functionalities whilst two of them are only essential for the user, the other eight functionalities are excluded for next iterations. It’s a matter of concern to be aware of that the ROI is definitely used in the exclusion process.

9. Self-Organizing Team

The best architectures, requirements, and designs emerge from self-organizing teams.

Agile methods redefine and limit the manager’s job by transferring many of the duties to the team as a whole, including one of the most important responsibilities: selecting tasks to be performed and assigning them to developers. Agile teams are self-organizing, deciding on their own tasks.

10. Retrospective

At regular intervals, the team reflects on how to become more effective, then tunes and adjusts its behavior accordingly.

Another agile practice is the retrospective, in which a team having finished a development iteration takes time off further development to reflect on the experience and the lessons learned, with the goal of improving its development process.

From Coding to Programming: Introduction

Mahmoud Ehab — Tue, 01 Mar 2022 23:14:31 +0000

The era of programmers; this is the best description that I'd give to the current era we live in. In these days, everyone wants to be a programmer, each one of us is somehow attracted to programming since the first time he/she heard of it. Thanks to YouTube and the dozens of free online courses on the internet, the number of programmers in the whole world is increasing exponentially. Each one of us, as a newbie, got interested in this creative magic thing, watched dozens of videos on YouTube that telling us how to write classes and methods (how to code), wrote several applications with various languages in different disciplines — starting with "Hello World" simple app, and ending up to a barely complex desktop/web/mobile app. Hover, knows nothing about programming.

As I mentioned, we watched many tutorials, but none of them taught us how to program. All they taught us is how to write code, how to define variables and use them with flow-control statements, how to turn the thoughts and solutions in our mind into code of sequences, selections, and iterations. Which is a good thing to learn, but it's not sufficient to make us real programmers.

It may seem absurd in the first glance; you may think that: "But we actually do make programs, so we can do programming... WE ARE PROGRAMMERS!". No, you cannot be a programmer just because you're able to produce a program. You are just using some programmers' artifacts to make/produce your messy, miserable, fragile program. You can't take a sketching pencil and start scribbling and then call yourself an artist!

Robert Martin had been teaching us that, in his books and lectures, for years. And one of the remarkable things that Robert said in one of his lectures was that the word "software" is a compound word composed of two words; "ware" which means product, and the word "soft" which means easy to change. We, as newbies programmers (software developers), fulfill just one part; we just write codes and make products that are not "soft", that are not maintainable and flexible.

Eventually, learning how to write code isn't sufficient to make you and me programmers. Software design and architecture is an essential topic for programmers to learn.

What is Software Design & Architecture

Although the word architecture is usually used to refer to the high-level, and the word design to the low-level, we often use the both interchangeably. In software, the high-level and the low-level specifications are made asynchronously, the architect keeps leaping from one level to the other, several times. Until he winds up with the suitable design for the system.

A software with a good architecture ought to be maintainable and flexible; If some code somewhere has been changed for some reason, it doesn't cause a bunch of bugs throughout various parts of the system. If any new feature would be added to the system, not much code would be changed (if 0 code will be changed, then the architect did his job well). On the other hand, a software with a bad architecture is always hard to change, hard to maintain, and costs a lot of money and time.

We may define Software Design and Architecture as a set of principles and best practices in software development, that developers should employ in their systems, in order to obtain the highest level of maintainability and flexibility.

In this series, I'll cover some of the principles, and a few design patterns. However, you can take a step further and learn more about these stuff by reading the following two books:

Clean Architecture, by Robert Martine.

Design Patterns, Elements of Reusable Object-Oriented Software.

Or even by watching Robert Martin lectures on YouTube.

execCommand() Alternative

Mahmoud Ehab — Thu, 13 Jan 2022 19:26:14 +0000

Abstract

Unfortunately, document.execCommand() function is no longer recommended, as it may be in the process of being dropped. If you are implementing a text editor in your web application, this is probably bad news for you. As this feature (JS feature) is used in making bold and italic texts, and may be in other few things too, like highlighting, redoing, ...etc.

This article gives you another way for implementing this kind of text manipulating — using built-in JS objects. Although, this article handles only bolding texts, the general approach can be used in implementing almost anything.

Introduction: Some Definitions

Straightforwardly, we shall use Selection and Range built-in JS objects instead of the function document.execCommand().

Range Object

This is considered as the primitive object that makes the whole magic. It's exactly what we need to bold a text.

A range is a contiguous part of a document. A range can contain entire nodes as well as portions of nodes (such as a portion of a text node).

Selection Object

As this object deals with the selected text in the screen via the user. Then it's our key to get a range object represents the text (portion of node) that we desire to manipulate.

A Selection object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or manipulation, call window.getSelection().

boldCommand Function

"Writing a function that makes the selected text bold" is kinda synoptic description or fuzzy, I'd say. Let's reformulate it to: a function that wraps the selected text within a node ("strong" HTML tag, for instance). And that's what we exactly are going to do; we'll insert the <strong> HTML element in the node of the selected text, in a specific range, using the Range JS object.

The logic of our function is simply as follows:

Create <strong></strong> HTML element.
Initialize a variable to the selection of the user (Selection Object).
Initialize a variable to the Range object from the selection in the previous step.
insert the created element in the first step using the range object in the previous step.

function boldCommand() {
    const strongElement = document.createElement("strong");
    const userSelection = window.getSelection();
    const selectedTextRange = userSelection.getRangeAt(0);
    selectedTextRange.surroundContents(strongElement);
}

Make Video Cutter with Bash Script + FFmpeg

Mahmoud Ehab — Fri, 07 Jan 2022 05:33:46 +0000

1. Introduction

When I want to take off some clips or scenes from a video on my laptop (with HDD), I usually find it tedious to do such a trivial thing using blender, shotcut, ...etc. Therefore, I wondered if I could simply use the terminal to do that.

This is what the article is all about. By the end of reading this article, you will not only be able to edit your videos using the terminal, but you will also be able to write your own bash script file.

I'm not sure if this is useful in the tech industry, but I know that it's kinda interesting for anyone who has already involved in coding before. You could consider this article as a piece of entertainment for CS GEEKS!

2. A Sneak Peek of Bash Script

First, and right before demonstrating the basics, we should mention a brief intro to what Bash actually is. In the same way, knowing what is Bash, is inherent from knowing what is GNU.

If you are familiar with the basics, you can just skip ahead to part 3 below.

2.1 What is GNU?

GNU is an operating system composed entirely of free software, that Richard Stallman developed and launched in September 1983. Free Software doesn't mean gratis, as Stallman defines it, it means a software that respects the users' freedom.

For more elaboration, you can watch Stallman himself talking about it in the video in the following link.
Richard Stallman's TEDx video: "Introduction to Free Software and the Liberation of Cyberspace"

2.2 What is Bash & Bash Scripting?

Bash is just the shell of GNU operating system. It takes commands from the user and execute it. And it considered the both, a command interpreter and a programming language.

Bash Scripting is collecting/writing bash commands in .sh file(s), that can then be executed using the bash.

2.3 Bash Scripting Basics

2.3.1 Syntax

Bash simply reads your script line by line, considering each one as a separated simple command or a constituent of a compound command.

As The form of simple command is just a sequence of words separated by blanks; like so echo "Hello World!". You should be careful when you define variables, for instance x = "some string var" the x in this line would be interpreted as a command.

A compound command is just a construct, that has a reserved word for indicating its beginning and another reserved word for its ending. It could contain more than simple command within, where each command separated with new line(s) or semicolon. For instance, the if statement if [ condition ]; then echo "Hello"; fi considered as a compound command.

For defining strings, you can use either single or double quotes. However, you may want to use double quotes rather than the single, when you need to use '$' as NOT literal. (as we'll see, it's used to retrieve variables values)

One final thing, the very first line of every script should be the path of the bash on your machine, which is used to interpret and run the current file. #!/bin/bash

2.3.2 Parameters & Variables

Every variable is a parameter, and not vice verse. A parameter is an entity that stores values, and once you give this parameter a name, It's called a variable.

You can declare a variable simply like that name=value or by using declare built-in command. Using declare command can be useful in several ways, one of which is when you want to declare a readonly (constant) variable.

var1="Hello World!"
declare v2="Hello World using declare"
declare -r v2="ReadOnly Variable"

However, when you want to print the variable value, for instance. You have to use '$' symbol to retrieve the value.

echo var1 #output: 'var1'
echo $var1 #output: 'Hello World!'

Positional Parameters are parameters that denoted by one or more digits, other than the single digit 0. They are temporarily replaced when a shell function is executed. And the set and shift builtins are used to set and unset them. You can reference them using '$' as with variables, except when denoted with more than one digit. Then you have to use parameter expansion. $1, $2, ${12} #Examples

Special Parameters are parameters that special for Bash, they can only be referenced, whereas each one expands to some value(s). You can think of them as built-in commands, or functions. We will use two of them in VideoCutter scripts: the @ parameter and 0. You can read of each one in the following link: Special Parameters.

2.3.3 Expansions

In my opinion, this's the most interesting topic in bash scripting. Expansions are used for several purposes, they are in arithmetic operations, making sequences (for instance, a list containing numbers: from one to ten), word splitting, and other more few things.

Brace Expansion

Brace Expansion can be used in two ways. One of them for generating multiple words with prefix or/and postfix.

echo a{b,c,d}e #output: abe ace ade
mkdir /home/{videos,photos} #will make two directories

As in variables, Bash will be confused with spaces in the brace Expansion

echo a{b, c, d}e #output: a{b, c, d}e
echo a {b,c} #output: a b c
echo "a "{b,c} #output: a b a c

And the another way is for generating sequences. You can think of it as a function that takes three parameters, the first one is the beginning of the sequence, the second is the ending, and the third is the increment value. The 'parameters' are separated by "..".

echo {1..5..1} #output: 1 2 3 4 5
echo {a..d..1} #output: a b c d

Parameter Expansion

Parameter Expansion is used to reference parameter/variable value. And It may be used with braces to protect the variable name from expanding with the following symbols.

var="Hello "
echo $var #output: Hello 
echo $varWorld #output: ""
echo ${var}World #output: Hello World

There are many features in this expansion, two of them are specifying the offset and the length of a string parameter.
${parameter:offset}
${parameter:offset:length}

You can check all its features here: Shell-Parameter-Expansion

Arithmetic Expansion

To evaluate arithmetic expressions, you cannot simply do this var=1+1 as in other programming languages. '1', '+', and '1' are not making any difference than 'a', 'b', and 'c'. They all treated as characters that construct a string.

Arithmetic Expansion allow us to make arithmetic operations, by enclosing the expression with brackets, like that $(( expr )).

expr=1+1
echo $expr #output: 1+1
echo $(( expr )) #output: 2
echo $(( 2*4 )) #output: 8
echo $(( "2**4" )) #output: 16

The evaluation is performed according to the rules of Shell Arithmetic. If the expression is invalid, Bash prints a message indicating failure to the standard error and no substitution occurs.

2.3.4 Split Strings

To split strings in Bash, we will use read built-in command, that will read some input (string) into an array.

str="some string"
read -a arr <<< $str
echo ${arr[0]} #output: some
echo ${arr[1]} #output: string

read splits the string according to each char in IFS variable. IFS default value is "{space}{tab}{newline}".

And the notation <<< is called here-string. That is used to redirect the read command to get the string from some source (variable), instead of prompting the user to enter some string.

2.3.5 Bash Conditional Expressions

Conditional Expressions return a boolean value; either true or false. They are used in if statement, and loop constructs. Therefore, It's essential to introduce them before going on.

-z checks if the variable is empty or not.
-gt checks if the left value is greater than the right value.
-eq checks if the left value equals the right value.
-ge checks if the left value greater than or equal to the right value.

Check the hole list here: Comparison Operators

2.3.6 If Statement

As the reader is supposed to be already involved in coding before. We only concerned to demonstrate the syntax of If Statement and Loops Constructs.

If Statement

if [ expr ]; then
   consequent-commands;
fi

Exmaple:

var=""
if [ -z var ]; then
   echo "The variable is empty!"
elif [ 5 -gt $var ] then
   echo "The variable is smaller than or equal to five."
else
   echo "The variable is greater than five."
fi

2.3.7 Loops

While Loop
Execute commands while the expression(s) is/are true.

i=0
while [ $i -lt 5 ]; do
   i=$(( ${i}+1 ))
   echo $i
done

For Loop
Form 1

listOfNames=(John Robert Bob)
for name in ${listOfNames[@]}; do
   echo $name
done

Form 2

for (( i=0; $i<5; i++ )); do
   echo $i
done

2.3.8 Prompt user for inputs

To get inputs from users, we shall use read built-in command read variable-name. And for displaying some text for the user to inform him what kind data should he enter, we use -p.

read -p "x: " X
read -p "Y: " Y
result=$(($X*$Y))
echo $result

#output:
#x: 4
#y: 5
#20

2.3.9 Number Base

A final thing that I'd like to mention in this brief tutorial: is how to convert integer variable base from octal to decimal. By default, Bash reads (interprets) any integer input in decimal base. Hovever, if the integer preceeded with 0, It tries to interpret it in octal base. Therefore, if you tried to add one to "08", Bash will give you an error message.

echo $(( "08" + 1 )) 
#output: 
#bash: 08: value too great for base (error token is "08")

In order to convert the base from octal to decimal. We shall use another form to write the number 08: base#"number".

echo $(( 10#"08" + 1 )) 
#output: 9

Finally, here's a handy cheatsheet that you may use to refresh your memory: Bash Scripting cheatsheet

Just to know; There are very basic stuff that were NOT mentioned here — they aren't used in VideoCutter. (pipelines, function, select, case, and many other)

3. VideoCutter using FFmpeg

Now the action begins, by using what we've learned in the previous section, and few commands from FFmpeg. We are going to write a bash script that prompt the user to input the path of the video file that supposed to be trimmed, and list of periods of that video.

Before getting started in writing and demonstrating the script step-by-step. You can download and try it from the following repository: https://github.com/Mahmoud-Ehab/video-cutter

You can install FFmpeg on ubuntu just by using the following commands:
$ sudo apt update
$ sudo apt install ffmpeg

3.1 Program Components (Scripts)

The program constructs of only four components:

main.sh this is the file which contains the main logic of the program, and what the user expected to execute.
cutter.sh used by main.sh as a command to extract clips from a mp4 file.
mp4tots.sh used by main.sh to convert the extracted clips from mp4 extension into ts.
tstomp4.sh used by main.sh to convert "clips.ts" file (the concatenation of the clips with ts extension files) from ts into mp4.

. TS file extension is a Video Transport Stream file used to store MPEG-2-compressed video data.

3.2 main.sh

1- Get inputs from the user

First we prompt the user to input the mp4 file path and the directory where the clips will be exported.

read -p "Mp4FilePath: " filepath
read -p "outputDir: " dirpath

Then we check if the dirpath is empty. If it is, then make it equal the current directory path.

...
if [ -z $dirpath ]; then
    dirpath='.'
fi

Intialize two lists T1 & T2; The first one is a list of intial time of each clip, and the second of the end of each clip.

T1=() #List of clips initial time
T2=() #List of clips end time

Each clip is a string in the form hh:mm:ss

And finally make a while loop for prompting user inputs repeatedly.

loop='0' #Var for indicating the end of while loop
count='0' #The number of specified clips

# Prompt user for inputs
while [ $loop == 0 ] do
    count=$(( $count + 1 ))
    read -p "Clip$count T1: " t1
    read -p "Clip$count T2: " t2

    T1+=($t1)
    T2+=($t2)

    read -p "Enough? (0 for no, 1 for yes): " loop
done

2- Extract clips from the mp4 file

First create the directory the user specified using mkdir command. If it does exist, nothing happens.

mkdir $dirpath

Then by using for loop, $count variable, and cutter.sh script. Generate $count number of clips out of $Mp4PathFile.

for (( i=0; i<$count; i++ ))
do
    output="$dirpath/clip$i.mp4"
    bash ./cutter.sh $filepath ${T1[$i]} ${T2[$i]} $output
done

3- Combine the clips

Convert clips from mp4 to ts using for loop... and mp4tots.sh script.

...
mp4file="$dirpath/clip$i.mp4"
tsfile="$dirpath/clip$i.ts"

bash ./mp4tots.sh $mp4file $tsfile

# Remove the mp4 file
rm $mp4file
...

Then concatenate them using cat built-in command.

    tsfiles=""
    for (( i=0; i<$count; i++ ))
    do
        tmp=" $dirpath/clip$i.ts"
        tsfiles+=$tmp
    done
    cat $tsfiles > $dirpath/output.ts
    rm $tsfiles

And finally convert the final ts file into mp4 using tstomp4.sh script.

bash ./tstomp4.sh $dirpath/output.ts $dirpath/output.mp4
rm $dirpath/output.ts

3.3 cutter.sh

cutter.sh has 4 positional parameters:

$1: the mp4 file path.
$2: t1, the beginning time of the clip. In the form hh:mm:ss
$3: t2, the ending time of the clip. in the form hh:mm:ss
$4: the output clip path.

1- Check if the required positional parameters are given

if [ -z $1 ] || [ -z $2 ] || [ -z $3 ] || [ -z $4 ]; then
    echo "Valid Usage: ./script.sh src.mp4 hh:mm:ss hh:mm:ss out.mp4"
    exit 2
fi

INP=$1
OUT=$4
T1=$2
T2=$3

2- Initialize start and end time variables

start and end will be arrays with three elements: hours, minutes, and seconds.
To split the user inputs $2 and $3, we shall use split strings (section 2.3.4 of this article) as descriped above.

IFS=':' #For splitting T1 and T2

# Initialize start time list
start=()
read -a arr <<< $T1
for i in ${arr[@]};
do
    start+=($i)
done

# Initialize end time list
end=()
read -a arr <<< $T2
for i in ${arr[@]};
do
    end+=($i)
done

3- Evaluate the duration between T1 and T2

The following algorithm (code) is trivial, and elaborating it is out of the scope of the article.

# Evaluate the duration between T1 and T2
# secs
if [ ${end[2]} -ge ${start[2]} ]; then
    ss=$(( 10#${end[2]} - 10#${start[2]} ))
else
    end[1]=$(( 10#${end[1]} - 1 ))
    ss=$((10#${end[2]} + 60 - 10#${start[2]}))
fi
# mins
if [ ${end[1]} -ge ${start[1]} ]; then
    mm=$(( 10#${end[1]} - 10#${start[1]} ))
else
    end[0]=$(( 10#${end[0]} - 1 ))
    mm=$(( 10#${end[1]} + 60 - 10#${start[1]} ))
fi
# hours
if [ ${end[1]} -ge ${start[1]} ]; then
    hh=$(( 10#${end[0]} - 10#${start[0]} ))
else
    exit 1
fi

After initializing $ss, $mm, and $hh. We shall assert that eachone of them is a string of length 2. Then construct the dur variable.

if [ $ss -lt 10 ]; then ss="0$ss"; fi
if [ $mm -lt 10 ]; then mm="0$mm"; fi
if [ $hh -lt 10 ]; then hh="0$hh"; fi

dur=$hh:$mm:$ss

4- Export the clip using FFmpeg command

Finally, we can take off the clip from the source mp4 using FFmpeg.

ffmpeg -i "$INP" -ss "$T1" -t "$dur" "$OUT"

3.4 mp4tots.sh

This script has jsut two positional parameters:

$1: the mp4 file path
$2: the ts file path

1- Check if the required positional parameters are given

if [ -z $1 ] || [ -z $2 ]; then
    echo "Valid Usage: ./script.sh input.mp4 output.ts"
    exit 2
fi

2- Convert the mp4 file using FFmpeg

Using FFmpeg command as found in the docs. (you can find it in the references)

ffmpeg -i "$1" -vcodec copy -vbsf h264_mp4toannexb -acodec copy "$2"

3.5 tstomp4.sh

This script has jsut two positional parameters:

$1: the ts file path
$2: the mp4 file path

1- Check if the required positional parameters are given

if [ -z $1 ] || [ -z $2 ]; then
    echo "Valid Usage: ./script.sh input.mp4 output.mp4"
    exit 2
fi

2- Convert the ts file using FFmpeg

ffmpeg -y -i "$1" -acodec copy -ar 44100 -ab 96k -coder ac -vbsf h264_mp4toannexb "$2"

References

Animate Components - ReactJS

Mahmoud Ehab — Sun, 26 Dec 2021 19:22:22 +0000

Introduction

If you want to animate your ReactJS Components in a rapid and easy manner, without using CSS. Then this post is for you.

To make it possible to define our own animations in ReactJS, without using CSS. We'll just use style prop, hooks and transition. However, to do so in a flexible manner with all CSS keyframes/animation features (loop, backward animation, ...etc) that goes beyond using just transition. And so, we ought to create an external reusable component that carries the whole logic of switching between different stages in the animation.

I already wrote such a component and deployed it on npm, with an additional feature: useAnimate hook that makes it more elegant and powerful. And this post elaborates how to use it in your project. However, if you want a post in how it actually works, let me know in the comments.

Installing

npm install react-animation-maker

Source Code: react-animation-maker

Usage

Animate Component

This component is used to define your own animations only using css-js objects. It animate the div from the object of the 'from' prop, to the list of objects of the 'to' prop.

import { Animate } from 'react-animation-maker'

<Animate 
from={{backgroundColor: '#f00'}} 
to={[{backgroundColor: '#0f0'}]}>
    Hello, World!
</Animate>

We can create multi-staged animation, as well. In other words, adding more than one object in the 'to' prop list.

<Animate 
from={{backgroundColor: '#f00'}} 
to={[
    {backgroundColor: '#0f0'},
    {backgroundColor: '#00f'},
]}>
    Hello, World!
</Animate>

Other props (OPTIONAL)

style: js-css object for the general style of all stages.
durations: string[] the durations between stages, its default value ['1s'].
delay: int specifies the delay time in milliseconds.
loop: boolen to indicate wheather the animation loops forever or not.

Using 'durations' Prop

This is an optional prop, whose only purpose is to descripe the duration between each stage and the one preceeding, starting from the first stage in "to" prop. The durations list length should be as the length of "to" list. If it's not, then the first value of the durations list is considered as the duration between each stage and the another.

Example

<Animate 
from={{backgroundColor: '#f00'}} 
to={[
    {backgroundColor: '#0f0'},
    {backgroundColor: '#00f'},
    {backgroundColor: '#f0f'},
    {backgroundColor: '#fff'},
]}
durations={['250ms', '500ms', '750ms', '1s']}>
    Hello, World!
</Animate>

Using Pre-defined Animations

import { Animate, FancyPopIn } from 'react-animation-maker'

<Animate 
from={FancyPopIn.from} 
to={FancyPopIn.to}
durations={FancyPopIn.durations}>
    Hello, World!
</Animate>

Checkout the whole list here:
https://mahmoud-ehab.github.io/react-animation-maker

Using useAnimate Hook

Another way to use Animate Component is using it through useAnimate Hook. This gives you the ability to rename your Animate Components and consequently increase the readibilty of your code. What makes it more powerful, that it allows you to change the animation of the component using event handlers.

import { useAnimate, FadeIn, FadeOut } from 'react-animation-maker'

const App = () => {
    const [Anim, setAnim] = useAnimate(FadeIn);

    return (
        <div>
            <Anim>
                Hello, World!
            </Anim>
            <button onClick={() => setAnim(FadeOut)}>
                Change Anim
            </button>
        </div>
    );
}

Notice that setAnim in the above example; just takes a props object,
hence you can do the following, as well...

import { useAnimate, FadeIn } from 'react-animation-maker'

const App = () => {
    const [Anim, setAnim] = useAnimate(FadeIn);

    return (
        <div>
            <Anim>
                Hello, World!
            </Anim>
            <button onClick={() => setAnim({from: {}, to: {[{opacity: 0}]})}>
                Change Anim
            </button>
        </div>
    );
}

DEV Community: Mahmoud Ehab

A Comprehensive Guide to Integrate FawryPay API into your own RESTful API Server

Table of Contents

1. Payment Process Workflow

1.1 Choosing Payment Method

1.2 Collecting Client’s Payment Details

Collecting Payment Card Details

1.3 Submitting Payment Request

The General Body Structure

3D Secure Authentication Card Payments

1.4 Showing Payment Status

Fawry Server Notification

2. Refund API

Refund Voucher

3. Bank Installments

4. General Architecture Specification

4.1 Entity Relationship Diagram

4.2 System Overview Diagram

4.3 Payment Strategy

4.4 Details Collector

4.5 Request Factory

4.6 One Feasible Implementation

Further Readings

StateFile: A Minimalist Design for Permanent State Management

StateFile in Abstract

Implementation

1. Naming Syntax & File Structure

2. Storing, Loading and Cracking Data

Storing & Loading Data

Cracking Data

3. Access and Manipulate Data

4. Typer

5. StateManager

6. FileManager

A Plea for Mature Industry!

Introduction to Agile

Some Agile Terminologies

Agile Principles

1. Continues Delivery

2. Accept Changes and Customer Role

3. Working Software

4. Team Meetings

5. Open Rooms and Pair Programming

6. Sustainable Development

7. Refactoring and TDD

8. Minimalistic Funcationality

9. Self-Organizing Team

10. Retrospective

From Coding to Programming: Introduction

What is Software Design & Architecture

execCommand() Alternative

Abstract

Introduction: Some Definitions

Range Object

Selection Object

boldCommand Function

Make Video Cutter with Bash Script + FFmpeg

1. Introduction

2. A Sneak Peek of Bash Script

2.1 What is GNU?

2.2 What is Bash & Bash Scripting?

2.3 Bash Scripting Basics

2.3.1 Syntax

2.3.2 Parameters & Variables

2.3.3 Expansions

Brace Expansion

Parameter Expansion

Arithmetic Expansion

2.3.4 Split Strings

2.3.5 Bash Conditional Expressions

2.3.6 If Statement

2.3.7 Loops

2.3.8 Prompt user for inputs

2.3.9 Number Base

3. VideoCutter using FFmpeg

3.1 Program Components (Scripts)

3.2 main.sh

1- Get inputs from the user

2- Extract clips from the mp4 file

3- Combine the clips