%% generate tags start %%
#computer-science
%% generate tags end %%
#computer-science/programming-language #computer-science
> [!tip] design pattern is tradeoff to create more maintainable code. It is a reusable solution to solve maintainability in complex architecture.
> Imagine you are building a tower. You have all the materials and you just to put it together. Design pattern is the answer to "how" you should put it together. If the building is small, maybe you can just do it without any pattern. But when the building start becoming bigger, you start need to need design pattern to make the building is firm and maintainable.
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://en.wikipedia.org/wiki/Software_design_pattern")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://en.wikipedia.org/wiki/Software_design_pattern" target="_blank">
<div class="nifty-link-card-text" style="width: 100%;">
<div class="nifty-link-card-title line-clamp-2">Software design pattern - Wikipedia</div>
<div class="nifty-link-card-description"></div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://en.wikipedia.org/static/apple-touch/wikipedia.png">
https://en.wikipedia.org/wiki/Software_design_pattern
</div>
</div>
</a>
</div>
%% run end %%
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://refactoring.guru/design-patterns")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://refactoring.guru/design-patterns" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">Design Patterns</div>
<div class="nifty-link-card-description">Design Patterns are typical solutions to commonly occurring problems in software design. They are blueprints that you can customize to solve a particular design problem in your code.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://refactoring.guru/favicon.png">
https://refactoring.guru/design-patterns
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://refactoring.guru/images/refactoring/social/facebook-share-preview.png?id=dbf9e98269595be86eb668f365be6868')">
</div>
</div>
</a>
</div>
%% run end %%