
import { CodeSandbox } from "mdx-embed";

## What I've learned previous week?

#### Css: clamps

I did not know that we can set minimum and maximum values for the css properties.
For example using clamps we're able to say that the width of the element cannot be smaller than 100px and bigger than 200px 👌
Of course it's not only for "width", you can use it for "height", "font-size" etc...

- https://css-tricks.com/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
- https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
- https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
- https://www.youtube.com/watch?v=CICYdO0g8Ew
- https://tailwindcss.com/docs/plugins#line-clamp

#### Popmotion

https://popmotion.io

I've been using Framer Motion to create animations in my projects for a while. But I did not pay attention what it's using in under the hood.
This week I've encountered with the Popmotion library. It's a library that allows us to create animations in JavaScript.
Also it powers the Framer Motion :)

Since it's a low level library I don't expect to use it easily like Framer Motion. Even so, it's good to know!

You can find an example of usage Popmotion with React below:

<CodeSandbox codeSandboxId="popmotion-test-in-react-stobk" />

#### TailwindCSS's Typography Plugin

Tailwind CSS is my favorite when it comes to styling of the website.
But I did not know that they have a plugin that allows us to style the typography easily.
It says "Beautiful typographic defaults for HTML you don't control."

Check this out: https://tailwindcss.com/docs/typography-plugin

## What did I do during previous week?

I was working on my website this week. It's actually released with a new design and content here, but still I have somethings
to do. I wish to complete everything before the new year!

## Links

- [Patterns.dev](https://www.patterns.dev) I've saw this in twitter from Addy Osmani.
  Patterns.dev is free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.
- [Roadmap.sh](https://roadmap.sh) If you don't know where to start learning programming, it can help you!
- [State of APIs](https://stateofapis.com/)
- [Leerob.io Web Site](https://leerob.io/) There are really great contents in his website. Also I'll copy the snippets section for my own website 🙈
  It's a great idea!
- [Masteringnextjs.com](https://masteringnextjs.com/) Next.js course from Lee. It's free.
- [React2025](https://react2025.com/) Another free course from Lee. Build and deploy a modern SaaS application using the most popular open-source software.
