
import { Tweet, YouTube, Instagram } from "mdx-embed";

This week was really well for me. Because I've reached some of my weekly goals!

- Reach 80 followers on Twitter. ✅
- Reach 500 subscriber on Youtube ✅
- Reach 280 followers on Instagram. ✅

I know! I know, it's not big numbers. But it's a progress and I'm proud of myself 🥳

## What I've learned previous week?

#### How to determine if a point lay on the line or not?

I was working on a project at [Swiftmade](https://swiftmade.co). I had needed to determine if a point is on the line or not.
I've realized that my math was not enough to do this quickly 😬😊😂. I've found a couple of solutions to implement but this one was working
really good.

```javascript
isOnLine(line, point) {
  // a: first point of line
  // b: end point of line
  // c: target point

  const ab = Math.sqrt(
    (line[0][0] - line[1][0]) ** 2 + (line[0][1] - line[1][1]) ** 2
  )

  const ac = Math.sqrt(
    (line[0][0] - point[0]) ** 2 + (line[0][1] - point[1]) ** 2
  )

  const bc = Math.sqrt(
    (line[1][0] - point[0]) ** 2 + (line[1][1] - point[1]) ** 2
  )

  // const result = Math.abs(ac + bc - ab) < Number.EPSILON
  const epsilon = 0.005
  const result = ac + bc - ab < epsilon

  return result
}
```

`Number.EPSILON` did not work well in my case. Using `0.005` was working well instead.

## What did I do during previous week?

#### Remember user preference of dark mode on my website

When you choose dark mode or light mode on this website, it will remember that and will works according to your last choice. 🥳

#### A new youtube tutorial

I've published the third episode of twitter clone tutorial.

<YouTube youTubeId="Sv3Tpjlz2oY" />

## Links

- https://brilliant.org - Courses about math, programming and science
- https://edit.photo - Free photo editor on the browser
- https://blog.ugursogukpinar.com/internet-nedir-ve-nasil-calisir
- https://dangitgit.com/en - Cheet sheet for git
- https://tally.so - free service to create forms


Week 5 — 24 January, 2022


import { Tweet, YouTube, Instagram } from "mdx-embed";

## What I've learned previous week?

#### Photoshop

Yeah! 👀 You've read it correct. 👀 I'm a software developer and I was hating photoshop. But after I've decided to focus on
my social media accounts, I've realized that I need to edit my pictures. Of course I'm not trying to be an expert in Photoshop,
but I've learned basically how I can manipulate the color of the pictures to make them matched each other.

#### Da Vinci Resolve

As you know, I'm publishing youtube tutorials. I need to use one video edit software to edit my videos. Da Vinci Resolve is free one and
it's amazing. I can't believe how it can be free without putting a watermark! Can you believe that???

I'm trying to learn how to improve my audio quality on the youtube videos. Also I'm using it to create my Instagram reels.
I like it so much! 🚀

#### Developer Tools: Rendering

I was working on a project at [Swiftmade](https://swiftmade.co).
The project that I'm working on had a performance issue. Somehow we were encountering dropped frames when we drag a widget around the page.
In order to fix that issue I should have understood the problem first.
In order to figure out the issue I've discovered 'Rendering' tool in Developer tools.
And it really helped me a lot to understand when this problem occurs.

<Tweet tweetLink="https://twitter.com/selahattinunlu/status/1480837108948426762" />

## What did I do during previous week?

Apart from working on the projects at Swiftmade, I also did some other things.

#### A new youtube tutorial

I had started cloning Twitter two weeks ago. This week I've published the second episode of that.

<YouTube youTubeId="TXbVHenPdag" />

#### I've shared a reels

Me, when the code I wrote works on the first try

<Instagram instagramId="CYsv0NpDOGh" />


Week 4 — 17 January, 2022


## What did I do during previous week?

I mostly did experimental things about social media accounts. I was not caring about my social media accounts earlier.
This year I want to be producer instead of being consumer. This is why I've started creating Youtube videos, weekly update contents etc.

I've tried to increase my Instagram followers but it did not go well 😬 I hope I'll learn the tricks and apply them on my account.

I've decided to remove all pictures from my Instagram account. Because they were shared randomly without paying attention to the color matches.
I aim for a much more consistent and professional-looking appearance. Hope I'll reach that 🙏

#### Added my youtube videos into my website using Youtube Data API

I was planning adding them to my website but I could not find time to implement it. This weekend I've completed it!
You can reach that page using "Programming Tutorials" link on the navbar. It was redirecting to my youtube channel earlier.
But now, you'll see my youtube videos there 🥳

#### A new youtube tutorial

While I'm implementing that feature I've mentioned above, I've also record a video while doing that.
I've thought in this way people also can learn how to use Youtube Data API for their websites.

- https://www.youtube.com/watch?v=ZxPnjfasYRk

#### I've shared a reels: Software Development: Expectation vs Reality

- https://www.instagram.com/reel/CYW3zXjjcY2/

## Links

- https://setapp.com - One-stop subscription to solving every task on Mac and iPhone.
- [How to fix "Spotlight forever indexing issue" on Mac OS X.](https://www.technobezz.com/how-to-fix-spotlight-forever-indexing-issue-on-mac-os-x/?utm_source=pocket_mylist)
- [How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js](https://www.youtube.com/watch?v=bSMZgXzC9AA)
- [2021 JavaScript Rising Stars](https://risingstars.js.org/2021/en)


Week 3 — 10 January, 2022


## What I've learned previous week?

#### Browserlist on package.json

My friend has realized that one of the website he built was not working well on Safari 12.
He had used Tailwindcss 3 to style the website and Tailwindcss3 targets to Safari 14+.

So I was looking for a solution to help him and I found of course 😬
The solution was adding "browserlists" into the package.json. Honestly I did not expect it to works
but it did 🥳😅

```json
// package.json

{
  .
  .
  .
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "last 3 safari version" // <-- this is the solution
    ]
  }
}
```

- https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers
- https://www.youtube.com/watch?v=F2N-evGOcxc
- https://github.com/browserslist/browserslist

#### Manipulate fetched data in react-query

We use react-query most of our projects in Swiftmade. I was looking for a way to manipulate the data already fetched
without refetch. I've found this solution: https://react-query.tanstack.com/reference/QueryClient?utm_source=pocket_mylist#queryclientsetquerydata

```javascript
const queryClient = useQueryClient();
const data = {...};
queryClient.setQueryData('query-key-here', data);
```

## What did I do during previous week?

- I was working on the projects in Swiftmade. We've completed redesigning of Wrkland's website. It's not released yet 😬
  I'm looking forward to share it here when it's released. 🥳 We had built a booking system for them last year. You can check it out for now https://booking.wrkland.com

- Apart from my daily tasks, I've built a side project in a day 😅
  I was using a service to share my all links in a single page. But it's gone I don't understand why 🥺
  Then I've decided to built a simple one instead. 🥳

  - https://heremylinks.com/selahattin
  - https://heremylinks.com

- I've published a new programming tutorial for my Turkish audience (Let's build a Twitter Clone 👀)
  - https://www.youtube.com/watch?v=b2k6MoC3YNU

## Links

- https://calendly.com/ - Easy scheduling ahead
- https://supabase.io - Open source Firebase Alternative (Btw I've used supabase's database for heremylinks)
- https://www.refactoringui.com/ - Great tips on UI/UX
- https://error404.fun/ - Royalty free illustrations for pages
- https://invoice-generator.com - Invoice generator
- https://www.youtube.com/watch?utm_source=pocket_mylist&v=0zmYHn82cY8 (Fastest way to deploy a database)


Week 2 — 3 January, 2022


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.
