DEV Community: Selahattin Ünlü

Weekly Update of Me: Week 2 (What I've learned, what did I do and the links I've found)

Selahattin Ünlü — Thu, 06 Jan 2022 08:46:23 +0000

Hi everybody! I've started to share weekly updates of me. You can find following topics inside:

What did I learn previous week?
What did I do during the week?
Links that I've found useful

You can also reach that contents on my website
https://www.selahattinunlu.com/weekly-updates/week-2

You can also check the first week using following link:
https://www.selahattinunlu.com/weekly-updates/week-1

Enjoy 🥳

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 🥳😅

// package.json

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

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

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

How to wait for a container to be ready?

Selahattin Ünlü — Sun, 04 Aug 2019 13:19:26 +0000

Originally published on my blog

The Problem

First of first, I don't have many experiences on Docker. I'm just trying to dockerize one of my side-project and I thought can learn about Docker. Although I did not deploy it yet, it seems great to use it in development at least. Anyway, let's talk about the main subject.

If you've worked with Docker before, you know that some containers might depends on to the others. For example, your backend applications might depends on to the MongoDB (just like in my case). In this case, backend application must wait until the mongo container is runned.

There are a couple of ways to set that dependencies in your configuration files. depends_on is one of them, and I was using it in my application. Everything were working perfectly at the beginning but today I've encountered with a problem! My application was not connecting to the MongoDB. But how? It was working last week and I did not do anything! What the hack?

Then, I've checked the logs and realized that the MongoDB was being ready to wait connections after my backend application is run! But I had used depends_on configuration! I've done a quick google search and understood the problem.

depends_on only cares about if the container is run or not. So, does not matter whether mongodb is ready for connections. Aha! It's so sensible. How could docker knows if it's ready or not?

The Solution

I've searched the solution as well and found a couple of solutions. I'm gonna tell you the best one for me.

The solution is wait-for-it.sh Here is the repository

It's a bash script to wait on the availability of a TCP host and port. You can find that description at its repository 'It is useful for synchronizing the spin-up of interdependent services, such as linked docker containers.'

How to apply the solution

I've copied wait-for-it.sh file into my app folder.
Then add those lines into Dockerfile:

COPY wait-for-it.sh /usr/wait-for-it.sh
RUN chmod +x /usr/wait-for-it.sh

And the final step, I've changed application command in docker-compose.yml:

app:
    container_name: backend
    restart: always
    build: .
    volumes:
        - .:/usr/src/app
        - /usr/src/app/node_modules
    ports:
        - "3030:3030"
        - "9229:9229"
    depends_on:
        - mongo
    command: bash -c "/usr/wait-for-it.sh --timeout=0 mongo:27017 && npm run dev"

That's all! My backend application waits until mongodb is ready for connections. End of the story! :)

Throttle and Debounce

Selahattin Ünlü — Wed, 17 Jul 2019 06:48:10 +0000

I think they are so cool techniques to prevent running a function too many times. There is a little difference between them and it confused me before thinking about it.

When I started to think about it (it was today, because I needed to use them), it started to seem easy to know what I need to use.

First, we need to decide what we want to do.

If we want to make limitation on a function which runs every time when an event occurred, we can use the throttle. We can use the throttle to decrease the number of calls. Let's imagine you're running a function when the mouse is moved. So, every time the function will run.
You might want to limit it to run every 2 seconds. The function will run only every 2 seconds while the mouse is moving.
You limited it and decreased the number of calls.

If we want to defer a function call until an event is completed, we need to use debouncing. There is a quick example of it. Let's imagine you want to make a search box that will give the suggestions according to the text to the user. Will you make a query in your database when the user hit to the keyboard every time? Of course, no! Because it'll hurt your database, right? You need to defer making query until the user stopped typing. You can say, make a query when if the user won't type anything in 500ms. It's debouncing.

Throttle will run after every X time.

Debounce will run only once when an event is done.

There is also a great demo to fully demonstrate how they work.

You can check it out: Throttle - Debounce Demo