Stale-while-revalidate is a cache validation strategy. Data, which is fetched from an API, for example, will be cached and consistently updated. The updates get triggered by certain events, like window focusing or mounting.&nbsp;This strategy aims to increase page speed with caching and keep the data up to date.

I implemented this strategy into&nbsp;<a href="https://www.portlancer.com/" target="_blank">Portlancer</a>&nbsp;and I was really thrilled by this strategy. The UI renders fewer loading indicators, and the data remains fresh due to the recurring revalidations.&nbsp;

This strategy follows a certain pattern. Before the client requests the data, the client checks whether the data exists in the cache. If it exists, the data will be rendered instantly at the beginning. Nonetheless, the client will fetch fresh data from an API and update the UI and the cache.

<a href="https://swr.vercel.app/" target="_blank">SWR</a>&nbsp;is a&nbsp;<a href="https://reactjs.org/" target="_blank">ReactJS</a>&nbsp;library made by&nbsp;<a href="https://vercel.com/" target="_blank">Vercel</a>, which uses the stale-while-revalidate strategy. With the help of SWR, the components get a stream of data, which updates constantly and automatically. With that, the UI will be fast and reactive.

Here is an example of how the SWR library is implemented in code:

The first argument of the useSWR hook is a key that will be used to get and store the data in the cache. The second argument is a function that is called by the library, with the key passed as the first argument. The fetcher function must return a promise.

&nbsp; If you want to work with the&nbsp;<a href="https://github.com/axios/axios" target="_blank">Axios library</a>, you can also use this fetcher for example:

The stale-while-revalidation strategy saves the data in the local cache and provides the benefit of keeping the balance between immediacy and freshness of the data. The web pages appeal much faster and are more dynamic. But due to the frequent requests made to keep the data fresh, the load of the server increases. With the help of third-party libraries like SWR, it’s possible to leverage this strategy.

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

stale-while-revalidate.jpg

Stale-while-revalidate

Although the&nbsp;<a href="https://agilemanifesto.org/" target="_blank">Agile Manifesto</a>&nbsp;places a higher value on functioning software than on comprehensive documentation, documentation is still important [1]. Because software documentation is a description that provides precise information about software systems [2] and supports software maintenance [3]. In addition, the purpose of such documentation is to enable software developers to communicate with each other. This should enable the future development of software efficiently [4].

Documentation is geared towards different target groups. The target groups include software developers, software maintainers, software users, and management. Since these target groups have different goals, documentation is divided into different types [3].

One of these variants is system documentation. System documentation contains all information that describes a system or software. The purpose of this documentation is to assist readers in understanding and maintaining the system. As with user documentation, it is important for system documentation to structure and convey the content to the reader with an overview. This allows the reader to navigate the system's various aspects and take in detailed information [3].

When it comes to large and complex systems, system documentation, according to Sommerville [3], should contain the following:

Qualitative Attributes of a software documentation

The quality of documentation is mainly influenced by the quality of the structure, the formatting, and the content. The quality of the content is, in turn, determined by several qualitative properties [5].

To optimally design documentation formatting, a few points should be observed. Many documentation users prefer graphical elements, as they greatly influence the understanding of the program. In addition, the writing style must also not be disregarded [6].

In addition, the structure of the documentation is also very important. The structure of documentation means how the content is organized in the documentation. Thus, we speak of content that is divided into chapters, sections, and subsections. The structure of documentation also greatly influences readability and usability. With well-structured documentation, readers are better able to extract information from it [3]. One possible standard that could be used here would be ISO / IEC / IEEE 26511: 2018 [12].

In addition to formatting and structure, it is also important that the content is qualitative. To design the content qualitatively, the content must have certain qualitative properties:

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

A wealth of information creates a poverty of attention

One should be able to distinguish between important and unimportant. Because many problems that arise in life dissolve mostly by themselves since they are not really important.

This is because we stuff ourselves with unnecessary information and assume that this will not affect our mental health. But everything that gets into our heads comes out again. At least it will impact our future thoughts that will form later.

Even unnecessary information becomes “important” for us

zoom.jpg

There is a reason why regimes throw a lot of propaganda at people:&nbsp;Due to a large amount of information, people lose their focus and, thus, their perception of the truth.

But there are things in life that are actually important. And that's why it is important that we focus on it and remove the fog that is in front of us.

Especially nowadays we have the problem that we are exposed to a lot of information.

smartphone.jpg

An example of this is social media, which forces us to compare ourselves with other people daily. It always gives the mentality the feeling that something is missing in life because others already have it. Inferiority complexes are not uncommon because of that.

newspaper.jpg

Another example is news in which newspaper publishers try to make as much money as possible with irrelevant articles. We always read articles that report problems that (to be honest) we might not care about. Our brain considers these problems to be important and causes a bad mood.

Try switching off many of your unnecessary sources of information and ignoring your fear of not being up-to-date. Because every time you take in information, it takes a lot of energy. And you can feel it at the end of the day when you are just mentally exhausted or can no longer sleep due to the flood of information.

I hope that I have helped you with this content here.&nbsp;Have a nice day.

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 write programs stretches your mind, and helps you think better, creates a way of thinking about things that I think is helpful in all domains

I was a friend of computer science from an early age. And I've always wanted to teach myself coding. But it was only after many years that I started to learn to code. More specifically, I started when I was 18.

This was because I never really knew where to start. Where should I get the knowledge from? In fact, I always believed that coding was very difficult and that you had to be very smart to do it.

I thought you had to study Computer Science to be able to code. But as always, this turned out to be a lie.&nbsp;Nowadays, due to the information age, it is very easy to access knowledge using the Internet.

My learning path started with a Google search: "How to learn to code".

and the first advertisements came from coding schools. One of them was "Codecademy."&nbsp;So I subscribed in the hope of learning at least the basics. I had several learning paths: data science, desktop programming, and web development. I chose web development. You learn the basics by coding on a coding panel and reading instructions that are divided into several sections. You can see the results on a custom web browser on the right side.

I have to admit that while the site wasn't bad, there were better alternatives that would have made the learning process faster.

Later I started buying courses from Udemy, which taught me programming much better and faster than Codecademy. Udemy is a learning platform where instructors post courses on their expertise, and students enroll in them. It was much better since the knowledge was also applied through example projects. So, I had a better idea of the whole thing and could use it better in my projects.

And that was the key: you had to start your own projects and slowly build up your own portfolio. Because although the Udemy courses have brought me forward well, I have to admit that I had trouble remembering the whole thing. Because the only thing I did was that I only saw the video and code it. But I had problems consolidating my knowledge because of this.

You learn a lot more with your own projects because you always run into problems yourself, which you then solve using the Internet. If a problem arises, you search for existing solutions on sites like Stack Overflow.

And slowly but surely, I started to process. I started to connect the points that were previously floating around.

And the learning process, which was difficult for me at the beginning and admittedly no fun, became fun. Because slowly, everything made sense.

If you want to be really good at programming, start taking on increasingly difficult challenges. If you are thinking of an "a little too ambitious" project for you, you have to make it happen. Exceed your limits because this is the only way to become the best.

In summary, if you want to learn to code, you can learn the basics with online courses and improve all of the knowledge with your own projects.

In addition, you should always have the courage to exceed your limits and start more difficult projects.

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

We eat, we play and we work? But why? What is going on in our heads?

Whenever we do something, our brain thinks there is a reward behind an action. As a result, the brain releases the happiness hormone&nbsp;<a href="https://en.wikipedia.org/wiki/Dopamine" target="_blank">dopamine&nbsp;</a>after every successful action.

The brain remembers this moment of happiness and later tries to reach it again with the same action. This is how habits or addictions are born.

We avoid pain and look for dopamine around every corner.&nbsp;Be it a cigarette, food, candy, Netflix, or gambling.

Back then, people had to work hard to get something. And the reward came after a certain time. Because that's the problem nowadays: We live in an age where&nbsp;instant

streaming.jpg

gratification is not uncommon. Instead of sitting down and studying for an exam at school, we'd rather play our game on the game console or watch Netflix.

gaming.jpg

Our brains remember that. He knows that learning is tedious and "painful". In addition, the only motivation behind it is the fear of getting a bad grade.

<u>Playing on the game console and watching Netflix brings instant dopamine</u>. So, the brain moves away and prefers to watch games and Netflix.

Working hard to climb the career ladder or starting your own business is hard, and the results are not immediately apparent.&nbsp;<u>Buying unnecessary consumer goods instead of saving and investing prefers the brain because instant gratification exists</u>.

But in the long term, everyone knows it doesn't get anyone far. We have to learn to control ourselves and often act more rationally.

Two US psychologists, James Olds and Peter Milner did an experiment with laboratory rats in the 1950s. They put the laboratory rats' electrodes in their brains and put them in a so-called "skinner box". There was a lever in the cage which, when actuated, triggered a slight electric shock on the rat brain.

The rats found this stimulating and kept operating the switch every 5 seconds. Some have simply neglected their food and drink and have broken down accordingly because they preferred the electric shock.

Immediate gratification makes us lazy and neglects basic things like eating and drinking. I don't want to know how many young men play video games for hours and don't care about their lives. I used to be one of them…

If you constantly look for the next kick, you will be lost one day.&nbsp;<u>We're all overstimulated&nbsp;</u>these days and crave the bigger kick. As a result, we no longer see a big reward behind simple things. This can be observed very well in addictions.

smoke.jpg

<i>Let's take the cigarette as an example. It starts with a cigarette at a party. Later you smoke one now and then. Suddenly you smoke one every day. And a few years later, you find yourself smoking 2 packs of cigarettes daily. The brain always wants more and will demand it accordingly.</i>

And in the end, we have an overstimulated brain, which is considered as "lazy and unmotivated"

If you feel unmotivated, think about these words:&nbsp;<u><b>A good grade in an exam, a successful investment, and a successful career take time. You should always keep this in mind.</b></u>

Don’t always seek for instant gratification. It doesn’t bring you further in life

The reason behind laziness, procrastination and addiction

sleeping-tiger.jpg

Laziness and its causes

After 3.5 years of studying Business Informatics and making incredible memories in my hometown Hamburg, I've decided to take on my next chapter and move to Böblingen to start my new position as a Digital Factory & Manufacturing IT Specialist. 

In this position, I develop applications and oversee the implementation of IT projects to enhance the manufacturing environment.

Digital Factory & Manufacturing IT Specialist at Philips Medizin Systeme GmbH

[Buildlinx](https://www.buildlinx.de/) revolutionizes the way non-residential buildings are technologically controlled. Through a seamless, modular software ecosystem, it offers deep connectivity and intelligence from the terminal to the cloud, drastically reducing energy costs and CO2 emissions, enhancing comfort, and minimizing operating costs.

### My Tasks
- Building Cloud Infrastructure with Apache Kafka
- Developing integrations with LoraWan and Kafka

Full-Stack Developer at Buildlinx

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

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

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

nihad-amin

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.jpg

Fainin Landing Page

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

farm-espace.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.

Blog

Here I write about topics that I find interesting