In this blog article I will explain the stale-while-revalidation pattern. 

stale-while-revalidate.jpg

Stale-while-revalidate

In this blog post I show you important points to consider, for building a qualitative system documention

documentation.jpg

Best practices for a system documentation

We all have a lot of thoughts that circle in our heads and make us ponder. We get into a feedback loop and, in the end, we image everything much worse than it really is. And that has its reason.

library.jpg

Limit Your Input

Learning to code is not easy. But that doesn't mean it's impossible. Here's the story of how I did it

code.jpg

How to learn to code

The reason behind laziness, procrastination and addiction

sleeping tiger.jpg

Laziness and its causes

I am currently the chairman of the Computer Science Student Council at [Nordakademie](https://www.nordakademie.de).

In this role, I lead a team of dedicated students in organizing events and improving the student experience for our fellow computer science students.

Chairman of the Computer Science Student Council (Nordakademie)

As a dual student (business informatics) at Philips, I have gained valuable experience across various departments in my field.

### Foundation & Analytics

This department was responsible for managing the website of the website.

- Revised and optimized various category pages and subpages on the company website
- Evaluated Adobe Analytics dashboards for performance tracking

### Commercial Policy

- Owned the technical structure of the selective database

### IT Market Engagement
- Developed RPAs using MS Power Automate to automate internal processes
- Conducted data analysis using tools such as Pandas

### Philips Böblingen Manufacturing

Philips gave me the opportunity to go to Böblingen and learn more
about their medical devices (Hospital Patient Monitoring) and the manufacturing of the company. 

- I built web apps and an IoT environment to help digitize processes and reduce waste
- I developed a production platform to collect data/KPIs using Python and Dash

### Marketing Insight & Analytics
- I migrated data pipelines
- I developed data pipelines with Databricks (Python/Spark)

Dual studies at Philips GmbH Market DACH

I am currently studying for a Bachelor's degree in **Business Informatics** at [Nordakademie](https://www.nordakademie.de). This study program provides me with a solid foundation in both **business administration** and **computer science**.

Nordakademie: Business Informatics

I previously worked as a **Software Developer** at [Fainin](https://fainin.com), where I was responsible for developing their **landing page** using [Angular](https://angular.io) and their CMS using [Strapi](https://strapi.io). 

This role gave me valuable web development experience and improved my Angular and Strapi skills. My contributions to the Fainin platform helped to improve the user experience.

Software Developer at Fainin

After graduating from middle school, I continued my studies at the [BBZ](https://www.bbz-norderstedt.de/index.php/bildungsangebot/berufliches-gymnasium) in Norderstedt. There I obtained my university entrance qualification, majoring in business administration and mathematics.

Abitur / A-Levels

Stories by Nihad Amin on Medium


<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zr9D3YEUvQuMz7eItPLqrw.jpeg"></figure><p>There is the idea that React components are constructed in the front end and then displayed based on the layout data obtained from the API. Thus, the front end is a visual representation of the data, depending on a given layout data, which can be retrieved from the API. So the front end is only a visualized copy of the data.</p>
<h3>Portlancer</h3>
<p>When I created <a href="https://www.nihadamin.com/works/portlancer-tem">Portlancer</a>, my goal was to provide users with a fast and easy way to build their own portfolio website with some degree of flexibility. I implemented a system where users can choose a theme and receive a set of components that can be arranged vertically through drag and drop. Each component also includes editable data to give users more control. I was heavily inspired by the headless CMS <a href="https://strapi.io/">Strapi</a>, which provides a similar feature named <strong>Dynamic Zones</strong>.</p>
<figure><img alt="The layout editor of Portlancer" src="https://cdn-images-1.medium.com/max/1024/1*pcyqptkH8ypnxk_YH-YJ1Q.jpeg"></figure><h3>How Portlancer renders the portfolios</h3>
<p>Once a user successfully links their custom domain to their portfolio and properly configures it, the servers have the ability to accurately direct visitor requests to the desired portfolio.</p>
<p>When someone visits the portfolio website using a domain such as <a href="https://www.nihadamin.com/">www.nihadamin.com</a>, a request is sent to the servers. The Host header in the request contains the domain name. Since the domain is linked to the portfolio, the server identifies which resource the visitor is trying to view.</p>
<p>One issue is that the Next.js application owns every theme, which can cause visitors to download unnecessary JavaScript for all themes when they only intended to load a single one. Proper handling is necessary to avoid this.</p>
<h3>Next.js Dynamic Component Import</h3>
<p>There is an advanced feature by Next.js named Dynamic Import, which is similar to React.lazy() Feature but with SSR support. Overall it helps to improve page performance by only loading the imported components into the page bundle if they are used.</p>
<p>With this feature, we can divide the themes into their bundles and also divide the components inside the themes in bundles (in case a component is not used)</p>
<h4>Example</h4>
<p>In the code snippet below, I use next/dynamic to import two themes dynamically. This approach is crucial to reduce the bundle sizes of the themes. It makes no sense to import all themes when only one is needed. The more themes we have, the larger the bundles become.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*liEhaz2lIht67d4T3Fp9vg.png"></figure><p>Every theme allows you to visit different pages. To ensure efficient loading, these pages should be dynamically imported, meaning they will be loaded only when they are visited.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tEo3BuAfzolu8CKXGOeNAw.png"></figure><p>Each webpage displays components. It's unnecessary to import all components at once because it is not clear that every component will be used. To address this, we also dynamically import them using next/import.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6h01A43X2PQEmyOb8gzRBg.png"></figure><p>We have set up Next.js only to display code that is relevant to the data provided by the API and to import only the necessary bundles.</p>
<h3>Additional Information</h3>
<p>It is crucial for next/dynamic that the components, which are imported dynamically, will only be evoked if they are used. So please do not write code like that.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3jc6wuBjOllvAydDiXrGsA.png"></figure><p>In the code example above, we execute every theme with &lt;/&gt; without determining whether they will be used or not. Therefore every theme will be imported and downloaded.</p>
<p>Thank you for taking the time to read. If you would like to explore more articles, I would like to suggest the following reads:</p>
<ul>
<li><a href="https://medium.nihadamin.com/how-to-build-a-robust-react-form-with-react-hook-form-and-material-ui-8fdb74321d1">How to build a robust react form with React-Hook-Form and Material UI</a></li>
<li><a href="https://medium.nihadamin.com/writing-clean-code-examples-in-typescript-5846ad18aef4">Writing Clean Code + Examples in TypeScript</a></li>
<li><a href="https://www.nihadamin.com/blog/stale-while-revalidate-f5j">Stale-while-revalidate | Nihad's Blog</a></li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4c93d679e03" width="1" height="1" alt="">


Next.js: Render data-driven layout in an efficient way


<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ES5LUMq1VHtWZFbO_4Eosw.jpeg"></figure><p>A form helps a website collect data from its visitors and, most of the time, send it to a server. Back then, it was pretty easy to develop a form. But nowadays, with modern technologies and more complex requirements, it becomes slightly harder to build a form.</p>
<h3>The default behavior of HTML forms</h3>
<p>Creating a form, which collects data and sends it to the server, is relatively easy in PHP. Create a form that sends the data to the same pathname with a POST method. The data can then be validated and saved in a database. If you want to change the URL and HTTP method, then only adjust the actionand methodattribute.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/986/1*jcE-SzPfbfDZS_VqoJqAng.png"></figure><h3>The react way</h3>
<p>In React, it becomes a little bit more complex because you have to implement your own submit logic. This means you have to pull the values of the input fields and send an HTTP request manually. In-built features like validation must also be implemented by yourself.</p>
<p>Nonetheless, there are two ways to handle the data of the input fields.</p>
<h4><strong>Controlled state</strong></h4>
<p>One way is to create a state that holds an input's value and update it via an event listener. You always handle the value of the input. This gives you complete control over the value of an input field. The benefit of this way is that you can build a reactive UI. The disadvantage is that the render function gets triggered a lot.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ixaobaQvFyHRCHcMOMeIlQ.png"></figure><h4><strong>Uncontrolled state</strong></h4>
<p>The other way is to create a ref with the useRef() function and pass it to the ref attribute of the input element. If you want to retrieve the data, you can retrieve it from the ref by ref.current.value . The benefit of this method is that the render() method is triggered less often. A big disadvantage is that you won’t be informed if the value of the input is changing. For that, you have to add an event listener additionally.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yZx3ZxPDMwPg4gicsRlucA.png"></figure><h4>The problem with forms in React</h4>
<p>If you want to implement a complex form with validation and error handling, then the chances are very high that the code will get messy. Either you have to use multiple useState() hooks and create multiple states for every input value, or you have to create one state with an object which contains every value (and validation/error state) of the input fields. This object must then be handled via the useReducer hook and a long switch statement.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QsiLO3beUVXQp297thbYXw.png"><figcaption>Form with two inputs built with useReducer (validation and error handling is included)</figcaption></figure><h3>External Libraries</h3>
<p>We will use external libraries like <a href="https://mui.com/">Material UI</a> and <a href="https://react-hook-form.com/">React Hook Form</a> to reduce the code complexity. They will make our code more maintainable and readable.</p>
<h4>Material UI</h4>
<blockquote>MUI offers a comprehensive suite of UI tools to help you ship new features faster<br>— mui.com</blockquote>
<p>Material UI has multiple form components which will enhance the developer experience:</p>
<ul>
<li>
<a href="https://mui.com/material-ui/react-text-field/"><strong>Text Field</strong></a>: Let the user enter and edit text</li>
<li>
<a href="https://mui.com/material-ui/react-select"><strong>Select</strong></a>: Let the user select a value from a list of options</li>
<li>
<a href="https://mui.com/material-ui/react-checkbox"><strong>Checkbox</strong></a>: Let the user check an option</li>
</ul>
<h4>React Hook Form</h4>
<blockquote>Performant, flexible and extensible forms with easy-to-use validation. <br>— react-hook-form.com</blockquote>
<p>With React Hook Form we can outsource most of the redundant logic into the library and reduce code complexity in our own codebase. React Hook Form offers functionality to integrate it with Material UI.</p>
<p>To combine Material UI with React Hook Form we will use the Controller component.</p>
<h3>Let’s get started</h3>
<p>You can access the code on CodeSandBox <a href="https://codesandbox.io/s/material-ui-react-hook-form-l1tvo7">here</a>.</p>
<h4>Installation</h4>
<p>Before we start, we have to install our two libraries via npm or yarn.</p>
<pre>npm install @mui/material @emotion/react @emotion/styled react-hook-form</pre>
<pre>or</pre>
<pre>yarn add @mui/material @emotion/react @emotion/styled react hook-form</pre>
<h4>Directory for form components</h4>
<p>Create a directory components/core/form and implement the following form components.</p>
<h4>Text Field</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*B5vEyjipWub3_7aAFScBEg.png"><figcaption>TextField.js</figcaption></figure><h4>Select</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DedFYLWobCBEbuIYqQLHJw.png"><figcaption>Select.js</figcaption></figure><h4>Checkbox</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XfzhNnZMHAj27C4BTO72ww.png"></figure><h4>Build a form with the form components</h4>
<p>With the components above, we can now build forms way more easier.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1Z_A_fGz5PVywDRiD8_Kaw.png"><figcaption>App.js</figcaption></figure><h3>Conclusion</h3>
<p>With the above implementation, it is evident that the code is much cleaner and more developer friendly. A clean code improves the maintainability of the code and prevents technical debt.</p>
<p>If you want to learn more about Clean Code, then feel free to read my blog post about Clean Code here:</p>
<p><a href="https://medium.com/@neihed/writing-clean-code-examples-in-typescript-5846ad18aef4">Writing Clean Code + Examples in TypeScript</a></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8fdb74321d1" width="1" height="1" alt="">


How to build a robust react form with React-Hook-Form and Material UI


<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3IAY_6xx6WdwK-DdroOpOg.jpeg"></figure><p>Writing clean code is one essential aspect you must consider as a developer. Clean code is a great indicator of the quality of your code. Ignoring this aspect can lead to heavy technical debt and, worst case, force you to drop projects.</p>
<h3>How clean is your code?</h3>
<p>To measure how clean your code is, you should ask yourself the following questions:</p>
<ul>
<li>Is the code easy to change, or will the change trigger multiple changes in other code areas?</li>
<li>Will the software break in multiple code areas if you change one thing in the codebase?</li>
<li>Can you use some parts of your code in other projects?</li>
<li>Is the code more complex than necessary?</li>
<li>Is your code repetitive?</li>
<li>Is the code easy to understand?</li>
</ul>
<p>To write cleaner code, you should follow some principles which are explained in this article.</p>
<h3>KISS</h3>
<p>Keep it simple stupid: Avoid unnecessary complexity in your code and keep it as simple as possible. Always ask yourself whether the code can be written more simply.</p>
<a href="https://medium.com/media/7601119e1e18c4c053540ab6f48f4d2b/href">https://medium.com/media/7601119e1e18c4c053540ab6f48f4d2b/href</a><h3>DRY</h3>
<p>Don’t repeat yourself: this is a software development principle that helps to avoid the repetition of coding patterns. You can implement this principle with the help of abstraction or data normalization.</p>
<a href="https://medium.com/media/22307a891543b2c3d13c6730be67d25a/href">https://medium.com/media/22307a891543b2c3d13c6730be67d25a/href</a><h3>YAGNI</h3>
<p>You aren’t gonna need it: Don’t code any features which are not necessary. Like Ron Jeffries has written: “Always implement things when you actually need them, never when you just foresee that you need them.”</p>
<p>Continuously adding new functionality without refactoring and testing could lead to disorganized code, leading to technical dept.</p>
<h3>Focus on human-readable code</h3>
<p>With modern programming languages, you can write concise code. But mostly, concise code is not readable by humans so easily. Therefore, focus on writing code your colleagues can read easily. It is easy to write code. But it is much harder to understand code from other people.</p>
<a href="https://medium.com/media/9f146c28a5bfb2a790974fc06d29c493/href">https://medium.com/media/9f146c28a5bfb2a790974fc06d29c493/href</a><h3>Stay consistent</h3>
<p>If you apply a certain coding pattern, then please stick to it. If the chosen coding pattern is inconsistent, everybody in the project will deviate from the coding pattern.</p>
<h3>Boy scout rule</h3>
<p>This rule states that you should leave the campground cleaner than you found it. You should have the same attitude if you work with code. Always leave the code cleaner than you found it.</p>
<h3>Replace nested If-Else statements with gateways</h3>
<p>With the help of gateways, you can avoid nested If-Else statements. The code is more readable and easier to understand.</p>
<a href="https://medium.com/media/9240e5173d740bed7f9d2938ec0511e0/href">https://medium.com/media/9240e5173d740bed7f9d2938ec0511e0/href</a><h3>Replace conditional statements with Polymorphism</h3>
<p>Here we try to follow the Tell-Don’t-Ask principle.</p>
<blockquote>Tell-Don’t-Ask is a principle that helps people remember that object-orientation is about bundling data with the functions that operate on that data. It reminds us that rather than asking an object for data and acting on that data, we should instead tell an object what to do. This encourages to move behavior into an object to go with the data. — <a href="https://martinfowler.com/bliki/TellDontAsk.html">Martin Fowler</a>
</blockquote>
<p>We try to replace long If-Else Statements with different classes.</p>
<a href="https://medium.com/media/edb3c36a343f1bad5c54becc4774c3a2/href">https://medium.com/media/edb3c36a343f1bad5c54becc4774c3a2/href</a><h3>Naming Rules</h3>
<ol>
<li>Use descriptive variable names</li>
<li>Let the variable names be distinctive</li>
<li>Replace numbers with descriptive variable names</li>
</ol>
<h3>Function Rules</h3>
<ol>
<li>Keep them small</li>
<li>Only let them do one task (SRP).</li>
<li>A function should have a small number of arguments</li>
<li>Try to avoid side effects</li>
</ol>
<h3>Comments</h3>
<p>I often hear from people that you should use a lot of comments in your code. But the code should be self-explanatory. Only add comments if it is necessary and if you think that you need to add a comment, try to refactor the code so people don't require one to understand the code.</p>
<p>Of course, this blog article does not cover all the principles that make for clean code. However, I think that these are very important.</p>
<p>For more information regarding this topic, I recommend you to read the great book <strong>Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin</strong>.</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5846ad18aef4" width="1" height="1" alt="">


Writing Clean Code + Examples in TypeScript

LinkedIn

Medium

Github

Xing

Stack Overflow

Nihad_Amin_cv.pdf

IMG-20220302-WA0040.jpg

nihad amin logo.png

Portlancer is a non-profit service, which offers the service to create your own personal portfolio website. You can present your works, skills, cv etc. to the world. You can choose between multiple themes and customize the layout via drag and drop.

Portlancer Logo.jpg

Portlancer

With a given design, I have developed the new landing page of Fainin (sharing platform)

fainin_logo_boomerang.jpg

Fainin Landing Page

Dripcheck is a website that shows worn outfits from German artists and links the clothing items.

dripcheck-black.jpg

Dripcheck

Farm Espace is an international company offering furniture and accessories for the office.

FarmEspace.jpg

Farm Espace

This is the official website of the "AEZ Schneiderei". The AEZ Schneiderei is a local tailoring in Hamburg (Poppenbüttel).

aez schneiderei.jpg

AEZ Schneiderei

SocialG: A personal project for visualizing networks. Manage diverse networks (personal, professional), with alerts for prolonged inactivity, promoting relationship maintenance.

network.jpg

SocialG

This is the personal blog of Anass Jdaa. He wanted a personal blog so I built one for him.

Nihad Amin

Portfolio

Some of my works & Participations

Tech Stack

These are the technologies I've learned and worked with over the years

HTML

CSS

Javascript

TypeScript

Python

Java

Git

React

Next.js

Vue.js

Angular

Node.js

SQL | MySQL

MongoDB

GraphQL

Pandas

Spark

Docker

Kafka

Redis

My Experience

Chairman of the Computer Science Student Council (Nordakademie)

Dual studies at Philips GmbH Market DACH

Foundation & Analytics

Commercial Policy

IT Market Engagement

Philips Böblingen Manufacturing

Marketing Insight & Analytics

Nordakademie: Business Informatics

Software Developer at Fainin

Abitur / A-Levels

About me

Contact

Let's start a great project together.

Social networks

More

Legals