My tumblr Blog

We created the dice simulation program using three approaches. Flux pattern https://zamjad.wordpress.com/2023/09/10/flux-design-pattern-using-typescript-in-react/ Reduc https://zamjad.wordpress.com/2023/09/22/dice-simulation-using-redux/ and useReducer https://zamjad.wordpress.com/2023/09/24/dice-simulation-using-usereducer-hook/ Now let’s do the same with Context API. Context API introduced in…

C++ 11 introduced a lots of new features in the language, threading is one of them. Before that we have to use operating system specific threading library or boost library for threading. Here is the simplest way to do threading in C++. #include <iostream> #include <thread> void threadfun() { std::cout << "threading function" << std::endl; } int main() { std::cout << "main thread" <<…

Placement new is a C++ feature that let us create a C++ object in a pre allocated memory or buffer. It is also one of the possible interview question. This feature is useful for embedded devices where we may have to manage the memory ourselves; or maybe will need to do the memory alignment. Another possible situation would be to do the performance optimization by doing the memory pooling. Here is…

In HTTP request, parameter can be passed in more than one way. For GET request, we can pass value by either query parameter, path parameter or header. For POST or PUT we can even pass it in the body. Let’s focus on the GET request and see how can we pass values in different ways. We already saw the example of query passing here…

Python is one of the few language who support multiple inheritance. Here is a simplest program to demonstrate multiple inheritance in Python. class Parent1: pass class Parent2: pass class Child(Parent1, Parent2): pass if __name__ == "__main__": child = Child() But what would be the method resolution order if same method is inherited in the class more than one way. The simple way to…

We already crated dice simulation program in two different ways, one using flux pattern and another one using redux library. Although redux is very popular and powerful library with lots of support for tools and testing, but it is bit complex and its learning curve is bit steep. It is very useful when we are trying to create a global state management by creating one application level store and…

We created a dice simulation program using flux design pattern here https://zamjad.wordpress.com/2023/09/10/flux-design-pattern-using-typescript-in-react/ Now let’s try to create a same program, but this time using one of the very popular state management library Redux. Let’s first install the redux using the following npm command on the terminal npm install redux react-redux The main concept is…

Client side routing is very important concept to create a smooth user experience in single page application (SPA). It also helps us to manage code easily. Although it is the most common react library for client side routing, but it is not the only one. The other libraries for client side routing are wouter, Hookrouter and Turbolinks among few others. First create a react-route-dom library using…

Flux is an interesting unidirectional architectural design pattern introduced by Facebook for React. React has unidirectional binding, unlike Angular which has bidirectional binding. It is the same pattern used by in Redux, which is very popular JavaScript library for statement management. It is important to know that Redux is not the only state management library, other possible choices are…

Every Python class has some special method start with __ and end with __. Let’s start with a empty class and see what is special methods are defined in it. class EmptyClass: pass if __name__ == "__main__": print(dir(EmptyClass)) Here is the output of it. [‘__class__’, ‘__delattr__’, ‘__dict__’, ‘__dir__’, ‘__doc__’, ‘__eq__’, ‘__format__’, ‘__ge__’, ‘__getattribute__’, ‘__getstate__’,…

After discussing the higher level object in react, I decided to explore decorator method in Python. We just saw an example of using decorator when writing web services using flask https://zamjad.wordpress.com/2023/09/01/writing-webservice-with-python/ Decorator is a method in python, which takes another method as an input, usually to enhance the functionality of the method. It makes our code more…

Higher Order Component, also known as HOC is very important concept in React. It is a react pattern where a function (or class) component takes a component as an input and return a component. It is one way to enhance the functionality of a component. React we are also doing lot of composition, but there are some differences between Higher Order Component and Composition. Composite component are…

We saw the example of writing webservice with node here https://zamjad.wordpress.com/2018/09/02/writing-webservice-with-node-js-and-express/ Now we are trying to do the same with python. There are different framework and libraries to write REST APIs such as Flask, Django, FastAPI, Tornado, Bottle, CherryPy, Falcon etc. Here we are going to use the flask lightweigh micro framework. The first step…

I personally prefer static type language, which means that I am able to catch as many errors even before running the programs. Therefore I like typescript and try to use it if possible. Another reason to use typescript it that it makes code simple and institutive. We create a program to pass the information in modal dialog and in that program we just pass the first name and last name. We even…

React maintain a copy of real DOM to update only part of the DOM tree that changes instead of the whole tree. It is known as virtual DOM. Philipe Bille discussed different algorithms related to this in the following paper https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf React is using Diffing algorithms which uses heuristic approach. The main steps of this algorithms…

We created a modal dialog, in previous post. Now let’s try to pass some values in to the modal dialog. First we are creating Modal dialog a different component in a different file to make code manageable. Let’s call this UserDialog. This Modal dialog displays first name and last name passed by the caller. We also passed isOpen variable and toggle method from the caller. Here is a code of our…

There is a famous saying that there are more than one way to skin a cat. We can do the same to solve this problem. Here we are going to discuss the simplest approach to create a model dialog in react. Fist we are going to use create-reat-app as our starting point. The simplest way is to install using npm, or npx. npx create-react-app my-app It creates a folder my-app with all the necessary files…