[{"data":1,"prerenderedAt":1532},["ShallowReactive",2],{"i-lucide:chevron-down":3,"i-lucide:search":8,"i-lucide:sun":10,"i-lucide:moon":12,"i-lucide:arrow-right":14,"i-lucide:menu":16,"i-lucide:mail":18,"i-simple-icons:x":20,"i-simple-icons:linkedin":22,"i-simple-icons:dribbble":25,"i-simple-icons:github":27,"i-lucide:arrow-up-right":29,"blog-\u002Fblog\u002Fbn\u002Fcomponent-margin-ownership":31,"blog-related-\u002Fblog\u002Fbn\u002Fcomponent-margin-ownership":487,"i-lucide:chevron-right":1502,"i-lucide:calendar":1504,"i-lucide:clock":1506,"i-lucide:link":1508,"i-lucide:globe-2":1510,"i-lucide:trending-up":1512,"i-lucide:info":1514,"i-lucide:circle-slash":1516,"i-lucide:columns-2":1518,"i-lucide:minus":1520,"i-lucide:plus":1522,"i-lucide:copy":1524,"i-lucide:circle-check":1526,"i-lucide:circle-help":1528,"i-lucide:triangle-alert":1530},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m21 21l-4.34-4.34\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cpath fill=\"currentColor\" d=\"M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":23,"hidden":24},"\u003Cpath fill=\"currentColor\" d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z\"\u002F>",true,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":26},"\u003Cpath fill=\"currentColor\" d=\"M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12s-5.385 12-12 12m10.12-10.358c-.35-.11-3.17-.953-6.384-.438c1.34 3.684 1.887 6.684 1.992 7.308a10.28 10.28 0 0 0 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.16 10.16 0 0 0 6.29 2.166c1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765q.202-.067.405-.12q-.392-.879-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248a66 66 0 0 0-3.8-5.928a10.28 10.28 0 0 0-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6c3.645-1.365 5.19-3.44 5.373-3.702A10.2 10.2 0 0 0 12 1.764c-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04c.24.49.47.985.68 1.486c.08.18.15.36.22.53c3.41-.43 6.8.26 7.14.33c-.02-2.42-.88-4.64-2.31-6.38z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":28},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":30},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",{"id":32,"title":33,"author":34,"body":37,"category":472,"cover":473,"coverAlt":473,"date":474,"description":475,"draft":6,"extension":476,"featured":6,"lang":477,"meta":478,"navigation":24,"path":479,"readingTime":185,"seo":480,"seoTitle":473,"stem":481,"tags":482,"__hash__":486},"blog\u002Fblog\u002Fbn\u002Fcomponent-margin-ownership.md","কম্পোনেন্টের গায়ে margin দেবেন না",{"name":35,"role":36},"নাফিস রহমান","ডিজাইন সিস্টেম লিড",{"type":38,"value":39,"toc":465},"minimark",[40,44,52,57,60,68,71,81,85,340,347,357,365,369,372,382,387,398,402,405,411,417,427,444,448,451,458,461],[41,42,43],"p",{},"একটা কম্পোনেন্ট লাইব্রেরি সাধারণত একভাবেই ভাঙে — এক জায়গায় সুন্দর দেখায়, অন্য জায়গায় বসালেই ফাঁকা জায়গার হিসাব মেলে না।",[41,45,46,47,51],{},"কারণটা প্রায় সবসময় একই। কার্ডের নিজের CSS-এ ",[48,49,50],"code",{},"margin-bottom: 24px"," লেখা আছে।",[53,54,56],"h2",{"id":55},"সমস্যাটা-মালিকানার","সমস্যাটা মালিকানার",[41,58,59],{},"একটা কম্পোনেন্টের ভেতরের ফাঁকা জায়গা — প্যাডিং, আইকন আর লেখার দূরত্ব, শিরোনাম আর বডির গ্যাপ — কম্পোনেন্টেরই সম্পত্তি। ওটা তার ডিজাইনের অংশ, সব জায়গায় এক থাকা উচিত।",[41,61,62,63,67],{},"কিন্তু কম্পোনেন্টের ",[64,65,66],"strong",{},"বাইরের"," ফাঁকা জায়গা তার নয়। ওটা লেআউটের সিদ্ধান্ত, আর লেআউট জানে কম্পোনেন্টটা কোথায় বসছে — গ্রিডে, সাইডবারে, নাকি ডায়ালগের ভেতরে একা। কম্পোনেন্ট সেটা জানে না, জানার কথাও না।",[41,69,70],{},"চাইল্ড যখন নিজের বাইরের মার্জিন নিজে ঠিক করে, তখন সে এমন একটা প্রশ্নের উত্তর দিয়ে ফেলে যেটা তাকে কেউ করেনি।",[72,73,74],"note",{},[41,75,76,77,80],{},"নিয়মটা এক লাইনে: ",[64,78,79],{},"প্যাডিং ভেতরের দিকে তাকায়, মার্জিন বাইরের দিকে।"," ভেতরের দিকের সবকিছু কম্পোনেন্টের, বাইরের দিকের সবকিছু প্যারেন্টের।",[53,82,84],{"id":83},"কোডে-পার্থক্যটা","কোডে পার্থক্যটা",[86,87,92,241],"compare",{"after":88,"before":89,"note":90,"split":91},"প্যারেন্ট গ্যাপ দিচ্ছে","চাইল্ড মার্জিন দিচ্ছে","দ্বিতীয়টায় কার্ড নিজে জানে না তার পরে আর কিছু আছে কি না — আর সেটাই ঠিক।","দুটোই",[93,94,96],"template",{"v-slot:before":95},"",[97,98,102],"pre",{"className":99,"code":100,"language":101,"meta":95,"style":95},"language-vue shiki shiki-themes github-dark-dimmed github-dark-dimmed","\u003C!-- Card.vue -->\n\u003Ctemplate>\n  \u003Carticle class=\"mb-6 rounded-xl border p-5\">\n    \u003Cslot \u002F>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n\n\u003C!-- ব্যবহার -->\n\u003CCard v-for=\"item in items\" :key=\"item.id\" \u002F>\n","vue",[48,103,104,113,126,148,163,173,183,189,195],{"__ignoreMap":95},[105,106,109],"span",{"class":107,"line":108},"line",1,[105,110,112],{"class":111},"s0RzX","\u003C!-- Card.vue -->\n",[105,114,116,120,123],{"class":107,"line":115},2,[105,117,119],{"class":118},"sM9_K","\u003C",[105,121,93],{"class":122},"sza-u",[105,124,125],{"class":118},">\n",[105,127,129,132,135,139,142,146],{"class":107,"line":128},3,[105,130,131],{"class":118},"  \u003C",[105,133,134],{"class":122},"article",[105,136,138],{"class":137},"sQdni"," class",[105,140,141],{"class":118},"=",[105,143,145],{"class":144},"szYpP","\"mb-6 rounded-xl border p-5\"",[105,147,125],{"class":118},[105,149,151,154,157,161],{"class":107,"line":150},4,[105,152,153],{"class":118},"    \u003C",[105,155,156],{"class":122},"slot",[105,158,160],{"class":159},"skSX4"," \u002F",[105,162,125],{"class":118},[105,164,166,169,171],{"class":107,"line":165},5,[105,167,168],{"class":118},"  \u003C\u002F",[105,170,134],{"class":122},[105,172,125],{"class":118},[105,174,176,179,181],{"class":107,"line":175},6,[105,177,178],{"class":118},"\u003C\u002F",[105,180,93],{"class":122},[105,182,125],{"class":118},[105,184,186],{"class":107,"line":185},7,[105,187,188],{"emptyLinePlaceholder":24},"\n",[105,190,192],{"class":107,"line":191},8,[105,193,194],{"class":111},"\u003C!-- ব্যবহার -->\n",[105,196,198,200,203,207,209,212,215,218,221,223,226,229,231,233,236,238],{"class":107,"line":197},9,[105,199,119],{"class":118},[105,201,202],{"class":122},"Card",[105,204,206],{"class":205},"sEYkB"," v-for",[105,208,141],{"class":118},[105,210,211],{"class":118},"\"",[105,213,214],{"class":118},"item ",[105,216,217],{"class":205},"in",[105,219,220],{"class":118}," items",[105,222,211],{"class":118},[105,224,225],{"class":118}," :",[105,227,228],{"class":137},"key",[105,230,141],{"class":118},[105,232,211],{"class":118},[105,234,235],{"class":118},"item.id",[105,237,211],{"class":118},[105,239,240],{"class":118}," \u002F>\n",[93,242,243],{"v-slot:after":95},[97,244,246],{"className":99,"code":245,"language":101,"meta":95,"style":95},"\u003C!-- Card.vue -->\n\u003Ctemplate>\n  \u003Carticle class=\"rounded-xl border p-5\">\n    \u003Cslot \u002F>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n\n\u003C!-- ব্যবহার -->\n\u003Cdiv class=\"flex flex-col gap-6\">\n  \u003CCard v-for=\"item in items\" :key=\"item.id\" \u002F>\n\u003C\u002Fdiv>\n",[48,247,248,252,260,275,285,293,301,305,309,325,331],{"__ignoreMap":95},[105,249,250],{"class":107,"line":108},[105,251,112],{"class":111},[105,253,254,256,258],{"class":107,"line":115},[105,255,119],{"class":118},[105,257,93],{"class":122},[105,259,125],{"class":118},[105,261,262,264,266,268,270,273],{"class":107,"line":128},[105,263,131],{"class":118},[105,265,134],{"class":122},[105,267,138],{"class":137},[105,269,141],{"class":118},[105,271,272],{"class":144},"\"rounded-xl border p-5\"",[105,274,125],{"class":118},[105,276,277,279,281,283],{"class":107,"line":150},[105,278,153],{"class":118},[105,280,156],{"class":122},[105,282,160],{"class":159},[105,284,125],{"class":118},[105,286,287,289,291],{"class":107,"line":165},[105,288,168],{"class":118},[105,290,134],{"class":122},[105,292,125],{"class":118},[105,294,295,297,299],{"class":107,"line":175},[105,296,178],{"class":118},[105,298,93],{"class":122},[105,300,125],{"class":118},[105,302,303],{"class":107,"line":185},[105,304,188],{"emptyLinePlaceholder":24},[105,306,307],{"class":107,"line":191},[105,308,194],{"class":111},[105,310,311,313,316,318,320,323],{"class":107,"line":197},[105,312,119],{"class":118},[105,314,315],{"class":122},"div",[105,317,138],{"class":137},[105,319,141],{"class":118},[105,321,322],{"class":144},"\"flex flex-col gap-6\"",[105,324,125],{"class":118},[105,326,328],{"class":107,"line":327},10,[105,329,330],{"class":118},"  \u003CCard v-for=\"item in items\" :key=\"item.id\" \u002F>\n",[105,332,334,336,338],{"class":107,"line":333},11,[105,335,178],{"class":118},[105,337,315],{"class":122},[105,339,125],{"class":118},[41,341,342,343,346],{},"প্রথমটায় লিস্টের শেষ কার্ডের নিচেও ২৪ পিক্সেল ঝুলে থাকে, যেটা কেউ চায়নি। ঠিক করতে গিয়ে ",[48,344,345],{},":last-child { margin-bottom: 0 }"," লেখা হয়, তারপর গ্রিডে বসালে আবার অন্য নিয়ম, তারপর ডায়ালগে আরেকটা। তিনটা ব্যতিক্রম লেখার পর কম্পোনেন্টটার স্পেসিং আর কেউ পড়ে বুঝতে পারে না।",[41,348,349,350,353,354,356],{},"দ্বিতীয়টায় ব্যতিক্রম নেই, কারণ নিয়মটাই নেই। প্যারেন্ট ",[48,351,352],{},"gap"," দিচ্ছে, শেষ আইটেমের পরে গ্যাপ বসে না — এটা ",[48,355,352],{},"-এর সংজ্ঞা, কারও লেখা নিয়ম নয়।",[358,359,360],"tip",{},[41,361,362,364],{},[48,363,352],{}," শুধু ফ্লেক্স আর গ্রিডে কাজ করে, আর সেটাই এর সবচেয়ে বড় সুবিধা। মার্জিন যেকোনো জায়গায় বসানো যায় বলেই যেকোনো জায়গায় ভুল হতে পারে।",[53,366,368],{"id":367},"মার্জিন-কলাপস-আরেকটা-কারণ","মার্জিন কলাপস আরেকটা কারণ",[41,370,371],{},"লম্বালম্বি মার্জিন পাশাপাশি বসলে দুটো যোগ হয় না, বড়টা টিকে থাকে। এটা CSS-এর পুরোনো আচরণ, ভুল নয় — কিন্তু কম্পোনেন্ট লেখার সময় এটাই সবচেয়ে বেশি বিভ্রান্ত করে।",[41,373,374,375,377,378,381],{},"উপরের কার্ডের ",[48,376,50],{}," আর নিচের কার্ডের ",[48,379,380],{},"margin-top: 16px"," মিলে ফাঁক হয় ২৪, ৪০ নয়। মানে আপনি যে সংখ্যাটা লিখেছেন, স্ক্রিনে সেটা নাও থাকতে পারে — নির্ভর করছে প্রতিবেশী কে।",[41,383,384,386],{},[48,385,352],{}," কলাপস করে না। যা লিখবেন তাই পাবেন।",[388,389],"quiz",{":answer":390,":options":391,"checkLabel":392,"correctLabel":393,"explanation":394,"incorrectLabel":395,"question":396,"resetLabel":397},"2","[\"১৬px — গ্রিডের gap মার্জিনকে বাতিল করে দেয়\",\"২৪px — মার্জিন আর gap কলাপস করে বড়টা থাকে\",\"৪০px — gap আর মার্জিন যোগ হয়\",\"২০px — দুটোর গড়\"]","উত্তর মিলিয়ে দেখি","ঠিক আছে","গ্রিড আর ফ্লেক্স আইটেমে মার্জিন কলাপস হয় না, তাই gap-এর ১৬px-এর সাথে কার্ডের নিজের ২৪px যোগ হয়ে ৪০px দাঁড়ায়। একই কম্পোনেন্ট ফ্লো লেআউটে বসালে উত্তর হতো ২৪ — অর্থাৎ ফাঁকা জায়গাটা কম্পোনেন্টের নয়, তার প্রতিবেশীর উপর নির্ভরশীল। এটাই মার্জিন এড়ানোর মূল যুক্তি।","হয়নি","একটা কার্ড কম্পোনেন্টে `margin-bottom: 24px` দেওয়া আছে। সেটাকে একটা `display: grid` কন্টেইনারে `gap: 16px` দিয়ে বসানো হলো। দুটো কার্ডের মাঝে ফাঁক কত হবে?","আবার চেষ্টা করি",[53,399,401],{"id":400},"ভেতরের-স্পেসিং-অবশ্যই-কম্পোনেন্টের","ভেতরের স্পেসিং অবশ্যই কম্পোনেন্টের",[41,403,404],{},"উল্টো দিকটাও সমান গুরুত্বপূর্ণ। কম্পোনেন্টের ভেতরের প্যাডিং প্যারেন্টের হাতে ছেড়ে দিলে একই বোতাম দশ জায়গায় দশ রকম হয়।",[41,406,407,410],{},[48,408,409],{},"size"," একটা বন্ধ তালিকা হওয়া উচিত — তিনটা মান, তিনটাই কম্পোনেন্টের ভেতরে লেখা। বাইরে থেকে ক্লাস দিয়ে প্যাডিং বদলানো মানে তালিকার বাইরে একটা চতুর্থ সাইজ তৈরি করা, যেটা কোথাও লেখা নেই:",[412,413],"playground",{":controls":414,"component":415,"label":416},"[{\"prop\":\"size\",\"options\":[\"sm\",\"md\",\"lg\"]},{\"prop\":\"variant\",\"options\":[\"primary\",\"outline\",\"ghost\"]}]","button","সংরক্ষণ করুন",[41,418,419,420,423,424,426],{},"উপরের প্রতিটা অবস্থার জন্য নিচে যে মার্কআপটা দেখাচ্ছে, সেটাই যথেষ্ট। কোনো ",[48,421,422],{},"class=\"px-6\""," নেই — কারণ দরকার হলে সেটা ",[48,425,409],{},"-এর তালিকায় যোগ করার আলোচনা, ব্যবহারের জায়গায় চুপচাপ ওভাররাইড নয়।",[428,429,430],"warning",{},[41,431,432,435,436,439,440,443],{},[48,433,434],{},"class"," প্রপ রাখা দরকার, কিন্তু সেটা অবস্থানের জন্য — ",[48,437,438],{},"w-full",", ",[48,441,442],{},"self-end",", গ্রিডের কলাম স্প্যান। ভেতরের প্যাডিং বা ফন্ট সাইজ ওভাররাইড করার জন্য নয়। দুটোর পার্থক্য রিভিউতে ধরা সহজ, কোডে নয়।",[53,445,447],{"id":446},"পুরোনো-কোডে-কীভাবে-ঢুকবেন","পুরোনো কোডে কীভাবে ঢুকবেন",[41,449,450],{},"একবারে সব বদলানোর দরকার নেই। যে কম্পোনেন্টটা সবচেয়ে বেশি জায়গায় ব্যবহার হয়েছে, সেটা দিয়ে শুরু করলেই সবচেয়ে বেশি ব্যতিক্রম মুছে যায়।",[452,453],"checklist",{":items":454,"doneLabel":455,"resetLabel":456,"title":457},"[{\"label\":\"কম্পোনেন্টের বাইরের সব margin খুঁজে বের করুন\",\"detail\":\"mb-, mt-, my- আর :last-child ব্যতিক্রমগুলো একসাথে।\"},{\"label\":\"প্রতিটা ব্যবহারের জায়গা তালিকা করুন\",\"detail\":\"গ্রেপ করলেই পাওয়া যায় — এখান থেকেই বোঝা যাবে কয়টা লেআউট আসলে আছে।\"},{\"label\":\"প্যারেন্টে flex\u002Fgrid আর gap বসান\",\"detail\":\"মার্জিনের যে মানটা ছিল, সেটাই gap-এ যাবে — নতুন সংখ্যা বানানোর দরকার নেই।\"},{\"label\":\"এবার কম্পোনেন্ট থেকে margin মুছুন\",\"detail\":\"আগে নয়। আগে মুছলে মাঝের কমিটে লেআউট ভাঙা থাকে।\"},{\"label\":\"last-child ব্যতিক্রমগুলো মুছুন\",\"detail\":\"এগুলো টিকে থাকলে বুঝতে হবে কোথাও মার্জিন রয়ে গেছে।\"},{\"label\":\"সরু স্ক্রিনে একবার দেখুন\",\"detail\":\"gap দুই দিকেই কাজ করে, তাই কলাম ভেঙে গেলে হিসাব বদলায়।\"}]","শেষ","রিসেট","একটা কম্পোনেন্ট থেকে মার্জিন সরানোর ধাপ",[41,459,460],{},"কাজটা ছোট, কিন্তু ফলটা কোড কমার চেয়ে বড়। এরপর থেকে কেউ কম্পোনেন্টটা নতুন কোনো জায়গায় বসালে তাকে আর জিজ্ঞেস করতে হয় না, \"এটার নিচে কি এমনিতেই ফাঁক আছে?\"",[462,463,464],"style",{},"html pre.shiki code .s0RzX, html code.shiki .s0RzX{--shiki-default:#768390;--shiki-dark:#768390}html pre.shiki code .sM9_K, html code.shiki .sM9_K{--shiki-default:#ADBAC7;--shiki-dark:#ADBAC7}html pre.shiki code .sza-u, html code.shiki .sza-u{--shiki-default:#8DDB8C;--shiki-dark:#8DDB8C}html pre.shiki code .sQdni, html code.shiki .sQdni{--shiki-default:#6CB6FF;--shiki-dark:#6CB6FF}html pre.shiki code .szYpP, html code.shiki .szYpP{--shiki-default:#96D0FF;--shiki-dark:#96D0FF}html pre.shiki code .skSX4, html code.shiki .skSX4{--shiki-default:#FF938A;--shiki-default-font-style:italic;--shiki-dark:#FF938A;--shiki-dark-font-style:italic}html pre.shiki code .sEYkB, html code.shiki .sEYkB{--shiki-default:#F47067;--shiki-dark:#F47067}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":95,"searchDepth":128,"depth":128,"links":466},[467,468,469,470,471],{"id":55,"depth":115,"text":56},{"id":83,"depth":115,"text":84},{"id":367,"depth":115,"text":368},{"id":400,"depth":115,"text":401},{"id":446,"depth":115,"text":447},"web-development",null,"2026-09-06","ফাঁকা জায়গার মালিক প্যারেন্ট, চাইল্ড নয়। একটা কম্পোনেন্ট নিজের বাইরের মার্জিন নিজে ঠিক করলে সেটা আর যেকোনো জায়গায় বসানো যায় না।","md","bn",{},"\u002Fblog\u002Fbn\u002Fcomponent-margin-ownership",{"title":33,"description":475},"blog\u002Fbn\u002Fcomponent-margin-ownership",[483,484,485],"CSS","লেআউট","কম্পোনেন্ট","8rjBjFFzefhZZ6SjjDHL64MrE_oUUP0P5go4GZiR5Mk",[488,1241,1386],{"id":489,"title":490,"author":491,"body":492,"category":472,"cover":1229,"coverAlt":490,"date":1230,"description":1231,"draft":6,"extension":476,"featured":6,"lang":477,"meta":1232,"navigation":24,"path":1233,"readingTime":185,"seo":1234,"seoTitle":473,"stem":1235,"tags":1236,"__hash__":1240},"blog\u002Fblog\u002Fbn\u002Fevent-loop-settimeout-zero.md","setTimeout(fn, 0) সাথে সাথে চলে না কেন",{"name":35,"role":36},{"type":38,"value":493,"toc":1221},[494,497,609,619,622,626,629,644,647,693,696,700,703,708,740,746,767,770,780,791,795,802,850,857,863,901,904,908,917,1006,1020,1025,1029,1032,1040,1043,1049,1182,1194,1198,1208,1218],[41,495,496],{},"এই কোডটার আউটপুট কী হবে?",[97,498,502],{"className":499,"code":500,"language":501,"meta":95,"style":95},"language-js shiki shiki-themes github-dark-dimmed github-dark-dimmed","console.log('১')\n\nsetTimeout(() => console.log('২'), 0)\n\nPromise.resolve().then(() => console.log('৩'))\n\nconsole.log('৪')\n","js",[48,503,504,522,526,555,559,592,596],{"__ignoreMap":95},[105,505,506,509,513,516,519],{"class":107,"line":108},[105,507,508],{"class":118},"console.",[105,510,512],{"class":511},"s-wk_","log",[105,514,515],{"class":118},"(",[105,517,518],{"class":144},"'১'",[105,520,521],{"class":118},")\n",[105,523,524],{"class":107,"line":115},[105,525,188],{"emptyLinePlaceholder":24},[105,527,528,531,534,537,540,542,544,547,550,553],{"class":107,"line":128},[105,529,530],{"class":511},"setTimeout",[105,532,533],{"class":118},"(() ",[105,535,536],{"class":205},"=>",[105,538,539],{"class":118}," console.",[105,541,512],{"class":511},[105,543,515],{"class":118},[105,545,546],{"class":144},"'২'",[105,548,549],{"class":118},"), ",[105,551,552],{"class":137},"0",[105,554,521],{"class":118},[105,556,557],{"class":107,"line":150},[105,558,188],{"emptyLinePlaceholder":24},[105,560,561,564,567,570,573,576,578,580,582,584,586,589],{"class":107,"line":165},[105,562,563],{"class":137},"Promise",[105,565,566],{"class":118},".",[105,568,569],{"class":511},"resolve",[105,571,572],{"class":118},"().",[105,574,575],{"class":511},"then",[105,577,533],{"class":118},[105,579,536],{"class":205},[105,581,539],{"class":118},[105,583,512],{"class":511},[105,585,515],{"class":118},[105,587,588],{"class":144},"'৩'",[105,590,591],{"class":118},"))\n",[105,593,594],{"class":107,"line":175},[105,595,188],{"emptyLinePlaceholder":24},[105,597,598,600,602,604,607],{"class":107,"line":185},[105,599,508],{"class":118},[105,601,512],{"class":511},[105,603,515],{"class":118},[105,605,606],{"class":144},"'৪'",[105,608,521],{"class":118},[41,610,611,612,615,616,618],{},"উত্তর ",[48,613,614],{},"১ ৪ ৩ ২","। ",[48,617,530],{},"-এ ০ মিলিসেকেন্ড দেওয়া সত্ত্বেও সেটা সবার শেষে চলে, এমনকি এমন একটা প্রমিসের পরেও যেটা তার পরে লেখা হয়েছে।",[41,620,621],{},"\"০ মানে এখনই নয়\" — এইটুকু মনে রাখলে কাজ চলে যায়, কিন্তু কেন নয় সেটা জানলে আর মুখস্থ করতে হয় না।",[53,623,625],{"id":624},"কল-স্ট্যাক-আগে-শেষ-হয়","কল স্ট্যাক আগে শেষ হয়",[41,627,628],{},"জাভাস্ক্রিপ্ট সিঙ্গল-থ্রেডেড। যেকোনো মুহূর্তে একটাই জিনিস চলে, আর সেটা কল স্ট্যাকের উপরের ফাংশনটা।",[41,630,631,632,635,636,639,640,643],{},"ইভেন্ট লুপ কোনো কিছু তুলে নেওয়ার আগে ",[64,633,634],{},"স্ট্যাক পুরো খালি হওয়া লাগে","। তাই উপরের কোডে ",[48,637,638],{},"console.log('১')"," আর ",[48,641,642],{},"console.log('৪')"," — যেগুলো সিঙ্ক্রোনাস — আগে চলবেই। বাকি সবকিছু সারিতে অপেক্ষা করে।",[41,645,646],{},"এখান থেকেই সবচেয়ে সাধারণ বাগটা আসে:",[97,648,650],{"className":499,"code":649,"language":501,"meta":95,"style":95},"\u002F\u002F ব্রাউজার এই পুরো লুপটা শেষ না হওয়া পর্যন্ত জমে থাকে\nfor (let i = 0; i \u003C 1e9; i++) {}\n",[48,651,652,657],{"__ignoreMap":95},[105,653,654],{"class":107,"line":108},[105,655,656],{"class":111},"\u002F\u002F ব্রাউজার এই পুরো লুপটা শেষ না হওয়া পর্যন্ত জমে থাকে\n",[105,658,659,662,665,668,671,673,676,679,681,684,687,690],{"class":107,"line":115},[105,660,661],{"class":205},"for",[105,663,664],{"class":118}," (",[105,666,667],{"class":205},"let",[105,669,670],{"class":118}," i ",[105,672,141],{"class":205},[105,674,675],{"class":137}," 0",[105,677,678],{"class":118},"; i ",[105,680,119],{"class":205},[105,682,683],{"class":137}," 1e9",[105,685,686],{"class":118},"; i",[105,688,689],{"class":205},"++",[105,691,692],{"class":118},") {}\n",[41,694,695],{},"স্ট্যাক খালি না হলে ইভেন্ট লুপ কিছুই করতে পারে না — ক্লিক হ্যান্ডলার চলবে না, রেন্ডারও হবে না। \"পেজ হ্যাং করে আছে\" মানে বেশিরভাগ সময় \"স্ট্যাক খালি হচ্ছে না\"।",[53,697,699],{"id":698},"দুইটা-আলাদা-সারি","দুইটা আলাদা সারি",[41,701,702],{},"স্ট্যাক খালি হলে ইভেন্ট লুপ যা দেখে, তা একটা সারি নয় — দুইটা, আর তাদের অগ্রাধিকার আলাদা।",[41,704,705],{},[64,706,707],{},"মাইক্রোটাস্ক সারি",[709,710,711,724,730,735],"ul",{},[712,713,714,717,718,717,721],"li",{},[48,715,716],{},"Promise.then"," \u002F ",[48,719,720],{},".catch",[48,722,723],{},".finally",[712,725,726,729],{},[48,727,728],{},"await","-এর পরের অংশ",[712,731,732],{},[48,733,734],{},"queueMicrotask",[712,736,737],{},[48,738,739],{},"MutationObserver",[41,741,742,745],{},[64,743,744],{},"ম্যাক্রোটাস্ক সারি"," (স্পেকে \"টাস্ক\")",[709,747,748,755,758,761],{},[712,749,750,439,752],{},[48,751,530],{},[48,753,754],{},"setInterval",[712,756,757],{},"DOM ইভেন্ট (click, input)",[712,759,760],{},"নেটওয়ার্ক কলব্যাক",[712,762,763,766],{},[48,764,765],{},"requestAnimationFrame"," (আলাদা ধাপে, রেন্ডারের আগে)",[41,768,769],{},"নিয়মটা এক লাইনে:",[771,772,773],"blockquote",{},[41,774,775,776,779],{},"প্রতিটা ম্যাক্রোটাস্কের পর, ",[64,777,778],{},"পুরো"," মাইক্রোটাস্ক সারি খালি করা হয় — তারপর পরের ম্যাক্রোটাস্ক।",[41,781,782,783,786,787,790],{},"তাই ",[48,784,785],{},"৩"," (প্রমিস, মাইক্রোটাস্ক) ",[48,788,789],{},"২","-এর (টাইমআউট, ম্যাক্রোটাস্ক) আগে চলে। ০ মিলিসেকেন্ড লেখা থাকলেও সেটা অন্য সারিতে, আর ওই সারির পালা পরে।",[53,792,794],{"id":793},"পুরো-শব্দটা-গুরুত্বপূর্ণ","\"পুরো\" শব্দটা গুরুত্বপূর্ণ",[41,796,797,798,801],{},"মাইক্রোটাস্ক সারি খালি করার সময় নতুন মাইক্রোটাস্ক যোগ হলে সেগুলোও ",[64,799,800],{},"একই দফায়"," চলে। এটা সুবিধা, আবার ফাঁদও:",[97,803,805],{"className":499,"code":804,"language":501,"meta":95,"style":95},"function loop() {\n  Promise.resolve().then(loop)\n}\nloop() \u002F\u002F পেজ জমে যায়\n",[48,806,807,818,834,839],{"__ignoreMap":95},[105,808,809,812,815],{"class":107,"line":108},[105,810,811],{"class":205},"function",[105,813,814],{"class":511}," loop",[105,816,817],{"class":118},"() {\n",[105,819,820,823,825,827,829,831],{"class":107,"line":115},[105,821,822],{"class":137},"  Promise",[105,824,566],{"class":118},[105,826,569],{"class":511},[105,828,572],{"class":118},[105,830,575],{"class":511},[105,832,833],{"class":118},"(loop)\n",[105,835,836],{"class":107,"line":128},[105,837,838],{"class":118},"}\n",[105,840,841,844,847],{"class":107,"line":150},[105,842,843],{"class":511},"loop",[105,845,846],{"class":118},"() ",[105,848,849],{"class":111},"\u002F\u002F পেজ জমে যায়\n",[41,851,852,853,856],{},"এখানে কোনো ইনফিনিট ",[48,854,855],{},"while"," নেই, তবু ব্রাউজার আর কিছু করতে পারে না — সারিটা কখনো খালি হয় না, তাই লুপ কখনো পরের ধাপে যায় না।",[41,858,859,860,862],{},"একই কোড ",[48,861,530],{}," দিয়ে লিখলে পেজ সচল থাকে:",[97,864,866],{"className":499,"code":865,"language":501,"meta":95,"style":95},"function loop() {\n  setTimeout(loop, 0)\n}\nloop() \u002F\u002F চলতেই থাকে, কিন্তু পেজ ব্যবহারযোগ্য\n",[48,867,868,876,888,892],{"__ignoreMap":95},[105,869,870,872,874],{"class":107,"line":108},[105,871,811],{"class":205},[105,873,814],{"class":511},[105,875,817],{"class":118},[105,877,878,881,884,886],{"class":107,"line":115},[105,879,880],{"class":511},"  setTimeout",[105,882,883],{"class":118},"(loop, ",[105,885,552],{"class":137},[105,887,521],{"class":118},[105,889,890],{"class":107,"line":128},[105,891,838],{"class":118},[105,893,894,896,898],{"class":107,"line":150},[105,895,843],{"class":511},[105,897,846],{"class":118},[105,899,900],{"class":111},"\u002F\u002F চলতেই থাকে, কিন্তু পেজ ব্যবহারযোগ্য\n",[41,902,903],{},"কারণ প্রতিটা ম্যাক্রোটাস্কের মাঝে ব্রাউজার রেন্ডার করার সুযোগ পায়।",[53,905,907],{"id":906},"await-আসলে-কী","await আসলে কী",[41,909,910,912,913,916],{},[48,911,728],{}," নতুন কিছু নয় — এটা ",[48,914,915],{},".then","-এর সিনট্যাক্স।",[97,918,920],{"className":499,"code":919,"language":501,"meta":95,"style":95},"async function run() {\n  console.log('ক')\n  await null \u002F\u002F ← এখানেই ফাংশনটা থামে\n  console.log('খ') \u002F\u002F ← এই অংশটা মাইক্রোটাস্ক\n}\n\nrun()\nconsole.log('গ')\n",[48,921,922,935,949,960,977,981,985,993],{"__ignoreMap":95},[105,923,924,927,930,933],{"class":107,"line":108},[105,925,926],{"class":205},"async",[105,928,929],{"class":205}," function",[105,931,932],{"class":511}," run",[105,934,817],{"class":118},[105,936,937,940,942,944,947],{"class":107,"line":115},[105,938,939],{"class":118},"  console.",[105,941,512],{"class":511},[105,943,515],{"class":118},[105,945,946],{"class":144},"'ক'",[105,948,521],{"class":118},[105,950,951,954,957],{"class":107,"line":128},[105,952,953],{"class":205},"  await",[105,955,956],{"class":137}," null",[105,958,959],{"class":111}," \u002F\u002F ← এখানেই ফাংশনটা থামে\n",[105,961,962,964,966,968,971,974],{"class":107,"line":150},[105,963,939],{"class":118},[105,965,512],{"class":511},[105,967,515],{"class":118},[105,969,970],{"class":144},"'খ'",[105,972,973],{"class":118},") ",[105,975,976],{"class":111},"\u002F\u002F ← এই অংশটা মাইক্রোটাস্ক\n",[105,978,979],{"class":107,"line":165},[105,980,838],{"class":118},[105,982,983],{"class":107,"line":175},[105,984,188],{"emptyLinePlaceholder":24},[105,986,987,990],{"class":107,"line":185},[105,988,989],{"class":511},"run",[105,991,992],{"class":118},"()\n",[105,994,995,997,999,1001,1004],{"class":107,"line":191},[105,996,508],{"class":118},[105,998,512],{"class":511},[105,1000,515],{"class":118},[105,1002,1003],{"class":144},"'গ'",[105,1005,521],{"class":118},[41,1007,1008,1009,615,1012,1015,1016,1019],{},"আউটপুট ",[48,1010,1011],{},"ক গ খ",[48,1013,1014],{},"await null"," — যেখানে অপেক্ষা করার মতো কিছুই নেই — তবু ফাংশনটা থামে, বাকিটা মাইক্রোটাস্ক হিসেবে সারিতে যায়, আর ",[48,1017,1018],{},"গ"," আগে চলে।",[41,1021,782,1022,1024],{},[48,1023,728],{},"-এর পরের প্রতিটা লাইন কার্যত একটা কলব্যাকের ভেতরে। সিরিয়ালি লেখা যায় বলে এটা ভুলে যাওয়া সহজ।",[53,1026,1028],{"id":1027},"রেন্ডারিং-কোথায়","রেন্ডারিং কোথায়",[41,1030,1031],{},"ব্রাউজার সাধারণত প্রতি ফ্রেমে একবার রেন্ডার করে — মোটামুটি ১৬.৭ms পরপর, ৬০Hz-এ। ধাপটা এরকম:",[97,1033,1038],{"className":1034,"code":1036,"language":1037},[1035],"language-text","ম্যাক্রোটাস্ক → মাইক্রোটাস্ক (সব) → rAF কলব্যাক → স্টাইল → লেআউট → পেইন্ট\n","text",[48,1039,1036],{"__ignoreMap":95},[41,1041,1042],{},"দুইটা ব্যবহারিক ফল:",[41,1044,1045,1048],{},[64,1046,1047],{},"এক"," — একই টিকে DOM বদলে আবার পড়লে ব্রাউজার জোর করে লেআউট হিসাব করে (layout thrashing):",[97,1050,1052],{"className":499,"code":1051,"language":501,"meta":95,"style":95},"\u002F\u002F খারাপ — প্রতি ধাপে জোর করে reflow\nfor (const el of items) {\n  el.style.height = el.offsetHeight + 10 + 'px'\n}\n\n\u002F\u002F ভালো — আগে সব পড়ুন, তারপর সব লিখুন\nconst heights = items.map((el) => el.offsetHeight)\nitems.forEach((el, i) => (el.style.height = heights[i] + 10 + 'px'))\n",[48,1053,1054,1059,1077,1099,1103,1107,1112,1142],{"__ignoreMap":95},[105,1055,1056],{"class":107,"line":108},[105,1057,1058],{"class":111},"\u002F\u002F খারাপ — প্রতি ধাপে জোর করে reflow\n",[105,1060,1061,1063,1065,1068,1071,1074],{"class":107,"line":115},[105,1062,661],{"class":205},[105,1064,664],{"class":118},[105,1066,1067],{"class":205},"const",[105,1069,1070],{"class":137}," el",[105,1072,1073],{"class":205}," of",[105,1075,1076],{"class":118}," items) {\n",[105,1078,1079,1082,1084,1087,1090,1093,1096],{"class":107,"line":128},[105,1080,1081],{"class":118},"  el.style.height ",[105,1083,141],{"class":205},[105,1085,1086],{"class":118}," el.offsetHeight ",[105,1088,1089],{"class":205},"+",[105,1091,1092],{"class":137}," 10",[105,1094,1095],{"class":205}," +",[105,1097,1098],{"class":144}," 'px'\n",[105,1100,1101],{"class":107,"line":150},[105,1102,838],{"class":118},[105,1104,1105],{"class":107,"line":165},[105,1106,188],{"emptyLinePlaceholder":24},[105,1108,1109],{"class":107,"line":175},[105,1110,1111],{"class":111},"\u002F\u002F ভালো — আগে সব পড়ুন, তারপর সব লিখুন\n",[105,1113,1114,1116,1119,1122,1125,1128,1131,1135,1137,1139],{"class":107,"line":185},[105,1115,1067],{"class":205},[105,1117,1118],{"class":137}," heights",[105,1120,1121],{"class":205}," =",[105,1123,1124],{"class":118}," items.",[105,1126,1127],{"class":511},"map",[105,1129,1130],{"class":118},"((",[105,1132,1134],{"class":1133},"siJwO","el",[105,1136,973],{"class":118},[105,1138,536],{"class":205},[105,1140,1141],{"class":118}," el.offsetHeight)\n",[105,1143,1144,1147,1150,1152,1154,1156,1159,1161,1163,1166,1168,1171,1173,1175,1177,1180],{"class":107,"line":191},[105,1145,1146],{"class":118},"items.",[105,1148,1149],{"class":511},"forEach",[105,1151,1130],{"class":118},[105,1153,1134],{"class":1133},[105,1155,439],{"class":118},[105,1157,1158],{"class":1133},"i",[105,1160,973],{"class":118},[105,1162,536],{"class":205},[105,1164,1165],{"class":118}," (el.style.height ",[105,1167,141],{"class":205},[105,1169,1170],{"class":118}," heights[i] ",[105,1172,1089],{"class":205},[105,1174,1092],{"class":137},[105,1176,1095],{"class":205},[105,1178,1179],{"class":144}," 'px'",[105,1181,591],{"class":118},[41,1183,1184,1187,1188,1190,1191,1193],{},[64,1185,1186],{},"দুই"," — অ্যানিমেশন ",[48,1189,530],{}," দিয়ে নয়, ",[48,1192,765],{}," দিয়ে। rAF রেন্ডার ধাপের ঠিক আগে চলে, তাই ফ্রেম মিস হয় না।",[53,1195,1197],{"id":1196},"০-আসলে-০-নয়","০ আসলে ০ নয়",[41,1199,1200,1201,1203,1204,1207],{},"শেষ একটা খুঁটিনাটি: HTML স্পেক অনুযায়ী নেস্টেড ",[48,1202,530],{}," পাঁচ স্তরের পর সর্বনিম্ন ",[64,1205,1206],{},"৪ মিলিসেকেন্ড"," ক্ল্যাম্প হয়। ব্যাকগ্রাউন্ড ট্যাবে ব্রাউজার এটা আরও বাড়িয়ে ১০০০ms-ও করে দিতে পারে।",[41,1209,1210,1211,1214,1215,1217],{},"অর্থাৎ ",[48,1212,1213],{},"setTimeout(fn, 0)"," মানে \"যত দ্রুত সম্ভব\" নয়, মানে \"পরের টাস্ক হিসেবে, সুবিধামতো\"। এখনই দরকার হলে ",[48,1216,734],{}," আছে — কিন্তু তাতে ব্রাউজার রেন্ডার করার সুযোগ পায় না, যেটা প্রায়ই আপনি চাইছিলেন।",[462,1219,1220],{},"html pre.shiki code .sM9_K, html code.shiki .sM9_K{--shiki-default:#ADBAC7;--shiki-dark:#ADBAC7}html pre.shiki code .s-wk_, html code.shiki .s-wk_{--shiki-default:#DCBDFB;--shiki-dark:#DCBDFB}html pre.shiki code .szYpP, html code.shiki .szYpP{--shiki-default:#96D0FF;--shiki-dark:#96D0FF}html pre.shiki code .sEYkB, html code.shiki .sEYkB{--shiki-default:#F47067;--shiki-dark:#F47067}html pre.shiki code .sQdni, html code.shiki .sQdni{--shiki-default:#6CB6FF;--shiki-dark:#6CB6FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s0RzX, html code.shiki .s0RzX{--shiki-default:#768390;--shiki-dark:#768390}html pre.shiki code .siJwO, html code.shiki .siJwO{--shiki-default:#F69D50;--shiki-dark:#F69D50}",{"title":95,"searchDepth":128,"depth":128,"links":1222},[1223,1224,1225,1226,1227,1228],{"id":624,"depth":115,"text":625},{"id":698,"depth":115,"text":699},{"id":793,"depth":115,"text":794},{"id":906,"depth":115,"text":907},{"id":1027,"depth":115,"text":1028},{"id":1196,"depth":115,"text":1197},"\u002Fcovers\u002Fblog\u002Fbn\u002Fevent-loop-settimeout-zero.webp","2026-06-11","ম্যাক্রোটাস্ক, মাইক্রোটাস্ক আর রেন্ডারিং — ইভেন্ট লুপের ধাপগুলো জানলে অ্যাসিঙ্ক কোডের ক্রম আর অনুমান করতে হয় না।",{},"\u002Fblog\u002Fbn\u002Fevent-loop-settimeout-zero",{"title":490,"description":1231},"blog\u002Fbn\u002Fevent-loop-settimeout-zero",[1237,1238,1239],"JavaScript","ইভেন্ট লুপ","অ্যাসিঙ্ক","sDSuoRwr_XRySGJ1RlFuI9K5Bb1TEKO_ZDlQkE38918",{"id":1242,"title":1243,"author":1244,"body":1247,"category":1373,"cover":473,"coverAlt":473,"date":1374,"description":1375,"draft":6,"extension":476,"featured":6,"lang":477,"meta":1376,"navigation":24,"path":1377,"readingTime":191,"seo":1378,"seoTitle":1379,"stem":1380,"tags":1381,"__hash__":1385},"blog\u002Fblog\u002Fbn\u002Ftrust-social-proof-conversion.md","মানুষ কেন অচেনা কারো কাছ থেকে কিনতে দ্বিধা করে — Trust Signal যেভাবে সেল বাড়ায়",{"name":1245,"role":1246},"সাদিয়া ইসলাম","গ্রোথ ও মার্কেটিং লিড",{"type":38,"value":1248,"toc":1366},[1249,1252,1259,1263,1270,1275,1279,1301,1304,1309,1313,1320,1325,1329,1336,1341,1345,1349,1352],[41,1250,1251],{},"একটা নতুন ফ্রিল্যান্সার, ভালো কাজ জানেন, পোর্টফোলিওও ভালো — কিন্তু ক্লায়েন্ট পাচ্ছেন না। অথচ পাশের আরেকজন, কাজের মান প্রায় কাছাকাছি, কিন্তু প্রোফাইলে \"৫০+ প্রজেক্ট সম্পন্ন, ৪.৯ রেটিং\" লেখা — তার কাছেই ক্লায়েন্ট বেশি যাচ্ছে।",[41,1253,1254,1255,1258],{},"এটা অন্যায্য মনে হতে পারে, কিন্তু মানুষের সিদ্ধান্ত নেওয়ার প্রক্রিয়াটাই এভাবে কাজ করে। কোনো কিছু সম্পর্কে নিজে যাচাই করার সময় বা তথ্য না থাকলে, মানুষ দেখে ",[64,1256,1257],{},"অন্যরা কী করছে"," — আর সেটাকেই নিরাপদ সিদ্ধান্ত হিসেবে ধরে নেয়।",[53,1260,1262],{"id":1261},"social-proof-একা-সিদ্ধান্ত-নিতে-না-চাওয়ার-প্রবণতা","Social Proof — একা সিদ্ধান্ত নিতে না চাওয়ার প্রবণতা",[41,1264,1265,1266,1269],{},"মনোবিজ্ঞানী Robert Cialdini তার বিখ্যাত \"Influence\" বইতে এই প্যাটার্নটাকে বলেছেন ",[64,1267,1268],{},"social proof"," — অনিশ্চয়তার মুহূর্তে মানুষ অন্যদের আচরণ দেখে নিজের সিদ্ধান্ত ঠিক করে। একটা রেস্টুরেন্টের সামনে লাইন দেখলে সেটাকে \"ভালো রেস্টুরেন্ট\" ধরে নেওয়া, বা একটা প্রোডাক্টের হাজার হাজার রিভিউ দেখে ভরসা পাওয়া — দুটোই একই প্রবৃত্তি থেকে আসে।",[72,1271,1272],{},[41,1273,1274],{},"Social proof সবচেয়ে বেশি কাজ করে যখন কাস্টমার নিজে নিশ্চিত না — নতুন প্রোডাক্ট, নতুন সার্ভিস প্রোভাইডার, বা দামি একটা সিদ্ধান্ত। যেখানে মানুষ ইতিমধ্যে নিশ্চিত (যেমন নিয়মিত কেনা কোনো ব্র্যান্ড), সেখানে রিভিউ-সংখ্যার প্রভাব তুলনামূলক কম।",[53,1276,1278],{"id":1277},"নির্দিষ্ট-সংখ্যা-ভাসা-ভাসা-দাবির-চেয়ে-বেশি-কার্যকর","নির্দিষ্ট সংখ্যা, ভাসা ভাসা দাবির চেয়ে বেশি কার্যকর",[86,1280,1285,1293],{"after":1281,"before":1282,"note":1283,"split":1284},"নির্দিষ্ট, যাচাইযোগ্য তথ্য","ভাসা ভাসা দাবি","ডান পাশের সংস্করণ নির্দিষ্ট সংখ্যা আর নাম দিয়ে যাচাইযোগ্যতা তৈরি করে — মিথ্যা বলার সুযোগ কম মনে হয়, তাই বিশ্বাসযোগ্যতাও বেশি।","একই ফ্রিল্যান্স প্রোফাইল",[93,1286,1287],{"v-slot:before":95},[97,1288,1291],{"className":1289,"code":1290,"language":1037},[1035],"অনেক ক্লায়েন্টের সাথে কাজ\nকরেছি, সবাই খুশি হয়েছেন।\nসেরা সার্ভিস দেওয়ার\nচেষ্টা করি সবসময়।\n",[48,1292,1290],{"__ignoreMap":95},[93,1294,1295],{"v-slot:after":95},[97,1296,1299],{"className":1297,"code":1298,"language":1037},[1035],"৩৭টা প্রজেক্ট, ৪.৯\u002F৫ রেটিং\n(১১ জন ক্লায়েন্ট রিভিউ)\n\"Grameenphone-এর ড্যাশবোর্ড\nরিডিজাইন — ৩ সপ্তাহে ডেলিভারি\"\n",[48,1300,1298],{"__ignoreMap":95},[41,1302,1303],{},"ভাসা ভাসা দাবি (\"সবাই খুশি\") আসলে মিথ্যা বলার মতোই সহজ, তাই মস্তিষ্ক সেটাকে বিশেষ গুরুত্ব দেয় না। কিন্তু নির্দিষ্ট সংখ্যা আর নাম — যাচাই করা যায় এমন কিছু — সহজে বানিয়ে বলা যায় না বলেই বেশি বিশ্বাসযোগ্য মনে হয়।",[428,1305,1306],{},[41,1307,1308],{},"জাল রিভিউ বা বানানো সংখ্যা ব্যবহার করাটা শুধু নৈতিকভাবে ভুল না — বাস্তবে ধরা পড়ে গেলে (আর প্রায়ই পড়ে) সেটা নিরপেক্ষভাবে বিশ্বাসহীনতার চেয়েও বেশি ক্ষতি করে, কারণ কাস্টমার তখন প্রতারিত বোধ করে। যা আছে তাই দেখান — অল্প কিছু আসল রিভিউ, বানানো অনেক রিভিউয়ের চেয়ে বেশি কাজ করে।",[53,1310,1312],{"id":1311},"reciprocity-আগে-দিলে-পরে-পাওয়া-যায়","Reciprocity — আগে দিলে, পরে পাওয়া যায়",[41,1314,1315,1316,1319],{},"Cialdini-র আরেকটা নীতি — ",[64,1317,1318],{},"reciprocity","। কেউ আগে থেকে বিনামূল্যে কিছু মূল্যবান পেলে, বিনিময়ে কিছু ফেরত দেওয়ার একটা স্বাভাবিক তাগিদ অনুভব করে। এই কারণেই ফ্রি টেমপ্লেট, ফ্রি অডিট, ফ্রি কনসালটেশন — এসব দীর্ঘমেয়াদে সেল বাড়ায়: প্রথমেই বিক্রির চেষ্টা না করে, আগে সাহায্য করলে বিশ্বাস তৈরি হয়, আর সেই বিশ্বাস থেকেই লেনদেন শুরু হয়।",[358,1321,1322],{},[41,1323,1324],{},"Reciprocity কাজ করার জন্য যা দিচ্ছেন সেটা আসলেই দরকারি হতে হবে — একটা সাধারণ ব্লগ পোস্টের চেয়ে, কাস্টমারের নির্দিষ্ট সমস্যার একটা ছোট, ব্যক্তিগতকৃত সমাধান (যেমন তার ওয়েবসাইটের একটা কুইক পারফরম্যান্স অডিট) অনেক বেশি প্রভাব ফেলে — কারণ সেটা স্পষ্টভাবে বোঝায় যে তার জন্যই সময় দেওয়া হয়েছে।",[53,1326,1328],{"id":1327},"authority-কে-বলছে-সেটাও-গুরুত্বপূর্ণ","Authority — কে বলছে সেটাও গুরুত্বপূর্ণ",[41,1330,1331,1332,1335],{},"একই তথ্য একজন নবীন ফ্রিল্যান্সার বললে এক রকম শোনায়, আর কেউ যদি জানে যে সেই একই মানুষ একটা পরিচিত কোম্পানির সাথে কাজ করেছেন, তাহলে সেটা অন্যরকম ওজন পায়। এটাকে বলে ",[64,1333,1334],{},"authority"," — সার্টিফিকেট, পরিচিত ক্লায়েন্টের নাম, বা কোনো প্রতিষ্ঠিত প্ল্যাটফর্মে ফিচার হওয়া — এসব প্রকৃত দক্ষতা না বাড়ালেও, সেই দক্ষতার প্রতি বিশ্বাসকে বাড়িয়ে দেয়।",[388,1337],{":answer":390,":options":1338,"checkLabel":392,"correctLabel":393,"explanation":1339,"incorrectLabel":395,"question":1340,"resetLabel":397},"[\"দাম খুব বেশি দেখাচ্ছে\",\"সার্ভিস লিস্ট খুব ছোট\",\"কোনো social proof বা trust signal নেই, তাই ভিজিটর ঝুঁকি নিতে দ্বিধা করবে\",\"ওয়েবসাইটের ডিজাইন পুরনো\"]","দাম বা ডিজাইন সমস্যা হতে পারে, কিন্তু মূল বাধা হলো বিশ্বাসের অভাব। একটা নতুন বা অচেনা এজেন্সির কাছ থেকে কেনার সিদ্ধান্তে ঝুঁকি বেশি মনে হয় — কেউ যাচাই করতে পারছে না এটা আসলেই কাজ করে কি না। ক্লায়েন্ট লোগো, নির্দিষ্ট সংখ্যাসহ রিভিউ, বা আসল কেস স্টাডি এই ঝুঁকির অনুভূতি কমিয়ে দেয়, কারণ সেগুলো দেখায় যে অন্যরা আগে ঝুঁকি নিয়ে সন্তুষ্ট হয়েছে।","একটা নতুন ওয়েব এজেন্সির ওয়েবসাইটে কোনো ক্লায়েন্ট লোগো, রিভিউ বা কেস স্টাডি নেই — শুধু সার্ভিস লিস্ট আর দাম আছে। সবচেয়ে বড় সমস্যা কী?",[53,1342,1344],{"id":1343},"trust-signal-অডিট-করার-চেকলিস্ট","Trust signal অডিট করার চেকলিস্ট",[452,1346],{":items":1347,"doneLabel":455,"resetLabel":456,"title":1348},"[{\"label\":\"রিভিউ বা টেস্টিমোনিয়ালে নির্দিষ্ট নাম, সংখ্যা বা ফলাফল আছে কি?\",\"detail\":\"\\\"ভালো লেগেছে\\\"-র চেয়ে \\\"৩ সপ্তাহে ডেলিভারি, ৪০% দ্রুত লোড টাইম\\\" বেশি বিশ্বাসযোগ্য।\"},{\"label\":\"পরিচিত ক্লায়েন্ট বা প্রতিষ্ঠানের নাম দেখানো যাচ্ছে কি (অনুমতি নিয়ে)?\",\"detail\":\"একটা পরিচিত নাম, দশটা অচেনা নামের চেয়ে বেশি কাজ করতে পারে।\"},{\"label\":\"কোনো ফ্রি মূল্যবান কিছু আগে থেকে দেওয়া হচ্ছে কি (reciprocity)?\",\"detail\":\"একটা ছোট, ব্যক্তিগতকৃত সাহায্য — সাধারণ কনটেন্টের চেয়ে বেশি বিশ্বাস তৈরি করে।\"},{\"label\":\"কোনো দাবিই কি যাচাই-অযোগ্য বা অতিরঞ্জিত শোনাচ্ছে?\",\"detail\":\"অতিরঞ্জিত দাবি সন্দেহ তৈরি করে, বিশ্বাস না।\"},{\"label\":\"রিভিউ বা প্রমাণ কি আসল, নাকি বানানো?\",\"detail\":\"জাল প্রমাণ ধরা পড়লে যেকোনো pricing বা marketing কৌশলের চেয়ে বেশি ক্ষতি করে।\"}]","ওয়েবসাইট বা প্রোফাইলে বিশ্বাসযোগ্যতা যাচাই করার তালিকা",[41,1350,1351],{},"সেল বাড়ানোর অনেকটাই আসলে প্রোডাক্ট বদলানো না — কাস্টমারের চোখে ঝুঁকিটা কমিয়ে দেওয়া। আর সেই ঝুঁকি কমে যখন সে দেখে, তার আগে অন্যরাও একই সিদ্ধান্ত নিয়ে ঠকেনি।",[41,1353,1354,1355,1360,1361,1365],{},"বিশ্বাস তৈরি হয়ে গেলে পরের প্রশ্নটা আসে দাম নিয়ে — ",[1356,1357,1359],"a",{"href":1358},"\u002Fblog\u002Fbn\u002Fprice-anchoring-decoy-effect","সেটা কীভাবে উপস্থাপন করলে কাজ করে",", আর ",[1356,1362,1364],{"href":1363},"\u002Fblog\u002Fbn\u002Ffreelance-rate-setting","নিজের রেট কীভাবে ঠিক করবেন"," — দুটোই আলাদা হিসাব।",{"title":95,"searchDepth":128,"depth":128,"links":1367},[1368,1369,1370,1371,1372],{"id":1261,"depth":115,"text":1262},{"id":1277,"depth":115,"text":1278},{"id":1311,"depth":115,"text":1312},{"id":1327,"depth":115,"text":1328},{"id":1343,"depth":115,"text":1344},"business","2026-09-11","একই ল্যান্ডিং পেজ, একই দাম, একই প্রোডাক্ট — শুধু নিচে তিনটা রিভিউ যোগ করলেই কনভার্শন বদলে যায়। এটা কাকতালীয় না, মানুষ সিদ্ধান্ত নেওয়ার সময় অন্যদের আচরণ দেখেই ভরসা করে।",{},"\u002Fblog\u002Fbn\u002Ftrust-social-proof-conversion",{"title":1243,"description":1375},"মানুষ অচেনা কারো কাছ থেকে কিনতে কেন দ্বিধা করে","blog\u002Fbn\u002Ftrust-social-proof-conversion",[1382,1383,1384],"Trust","Conversion","সাইকোলজি","zbp8wNKt8V0yU7FIOwTSAV5lhPtUdkwPcOtUAWdPOJA",{"id":1387,"title":1388,"author":1389,"body":1390,"category":1373,"cover":473,"coverAlt":473,"date":1490,"description":1491,"draft":6,"extension":476,"featured":6,"lang":477,"meta":1492,"navigation":24,"path":1493,"readingTime":191,"seo":1494,"seoTitle":1495,"stem":1496,"tags":1497,"__hash__":1501},"blog\u002Fblog\u002Fbn\u002Fjobs-to-be-done-customer-problem.md","প্রোডাক্ট বেচবেন না, সমস্যার সমাধান বেচুন — Customer আসলে কী 'hire' করছে",{"name":1245,"role":1246},{"type":38,"value":1391,"toc":1484},[1392,1395,1398,1401,1405,1412,1417,1421,1443,1446,1451,1455,1462,1467,1473,1477,1481],[41,1393,1394],{},"একটা ফাস্ট-ফুড চেইন মিল্কশেকের সেল বাড়াতে চেয়েছিল। তারা শুরুতে করেছিল যা সবাই করে: কাস্টমারদের জিজ্ঞেস করেছিল মিল্কশেক আরও মিষ্টি হওয়া উচিত কি না, ঘন হওয়া উচিত কি না, ফ্লেভার বাড়ানো উচিত কি না। ফিডব্যাক অনুযায়ী বদলও করেছিল — সেলে তেমন পার্থক্য হয়নি।",[41,1396,1397],{},"পরে একজন গবেষক আলাদাভাবে খেয়াল করলেন: প্রায় অর্ধেক মিল্কশেক বিক্রি হচ্ছিল সকালবেলা, একা আসা মানুষদের কাছে, যারা সেটা গাড়িতে বসে খেয়ে অফিসে যাচ্ছিলেন। জিজ্ঞেস করে জানা গেল — তারা মিল্কশেক \"খেতে\" আসেননি। তারা এসেছিলেন একটা বোরিং, একঘেয়ে ড্রাইভকে একটু সহনীয় করার মতো কিছু খুঁজতে — যেটা এক হাতে খাওয়া যায়, নোংরা হয় না, আর অনেকক্ষণ ধরে টিকে থাকে যাতে পুরো জ্যামটা কাটানো যায়।",[41,1399,1400],{},"মিল্কশেক তাদের কাছে আসলে একটা \"সঙ্গী\" — বোরডম দূর করার একটা টুল। এই আসল কাজটা বুঝেই কোম্পানি প্রোডাক্টে বদল আনল: আরও ঘন করল (যাতে বেশিক্ষণ ধরে খাওয়া যায়, স্ট্র দিয়ে টানতে সময় লাগে), আর ছোট ছোট ফল-টুকরো যোগ করল (মাঝেমধ্যে একটা \"সারপ্রাইজ\")। মিষ্টতা নিয়ে কিছুই বদলায়নি।",[53,1402,1404],{"id":1403},"customer-প্রোডাক্ট-কেনে-না-একটা-কাজের-জন্য-hire-করে","Customer প্রোডাক্ট কেনে না, একটা কাজের জন্য \"hire\" করে",[41,1406,1407,1408,1411],{},"এই চিন্তাধারাকে বলে ",[64,1409,1410],{},"Jobs-to-be-Done (JTBD)"," — মূল কথা: মানুষ কোনো প্রোডাক্ট বা সার্ভিস কেনে না, বরং তাদের জীবনের একটা নির্দিষ্ট মুহূর্তে, একটা নির্দিষ্ট সমস্যা সমাধানের জন্য সেটাকে \"hire\" করে। প্রোডাক্ট বদলে গেলেও, বা প্রতিযোগী বদলে গেলেও, \"job\"-টা একই থেকে যায়।",[72,1413,1414],{},[41,1415,1416],{},"\"Job\" মানে সবসময় ব্যবহারিক (functional) কিছু না। একটা দামি ঘড়ি কেনার job হতে পারে \"সময় দেখা\" — অথবা হতে পারে \"নিজেকে সফল হিসেবে অনুভব করা\" (emotional job) বা \"অন্যদের কাছে একটা নির্দিষ্ট ইমেজ তৈরি করা\" (social job)। একই প্রোডাক্ট, ভিন্ন কাস্টমারের কাছে ভিন্ন job সমাধান করছে হতে পারে।",[53,1418,1420],{"id":1419},"ফিচার-ভিত্তিক-পিচ-বনাম-job-ভিত্তিক-পিচ","ফিচার-ভিত্তিক পিচ বনাম job-ভিত্তিক পিচ",[86,1422,1427,1435],{"after":1423,"before":1424,"note":1425,"split":1426},"Job-ভিত্তিক পিচ","ফিচার-ভিত্তিক পিচ","বাম পাশেরটা প্রোডাক্ট নিয়ে কথা বলছে, ডান পাশেরটা কাস্টমারের আসল ভয় আর সময়ের সংকট নিয়ে কথা বলছে।","একই সার্ভিস — accounting সফটওয়্যার",[93,1428,1429],{"v-slot:before":95},[97,1430,1433],{"className":1431,"code":1432,"language":1037},[1035],"আমাদের সফটওয়্যারে আছে:\n- অটোমেটিক ইনভয়েস জেনারেশন\n- রিয়েল-টাইম ট্যাক্স ক্যালকুলেশন\n- মাল্টি-কারেন্সি সাপোর্ট\n",[48,1434,1432],{"__ignoreMap":95},[93,1436,1437],{"v-slot:after":95},[97,1438,1441],{"className":1439,"code":1440,"language":1037},[1035],"মাস শেষে হিসাব মেলাতে বসে\nরাত জাগতে হবে না।\n৫ মিনিটে ইনভয়েস, ট্যাক্সের\nহিসাব নিজে থেকেই ঠিক থাকবে।\n",[48,1442,1440],{"__ignoreMap":95},[41,1444,1445],{},"দুটোই একই ফিচার বর্ণনা করছে। কিন্তু দ্বিতীয়টা কাস্টমারের আসল অভিজ্ঞতা — মাস শেষে হিসাব নিয়ে চাপ, রাত জেগে কাজ করা — সেই জায়গা থেকে কথা বলছে। যে কাস্টমার এই ব্যথাটা অনুভব করছেন, তার কাছে দ্বিতীয় পিচটাই আগে পৌঁছায়।",[428,1447,1448],{},[41,1449,1450],{},"নিজে থেকে অনুমান করে নেওয়া সবচেয়ে বড় ভুল — \"আমার মনে হয় কাস্টমাররা স্পিড চায়\" বলে ফিচার বানিয়ে ফেলা, আসল কাস্টমারকে জিজ্ঞেস না করেই। মিল্কশেকের উদাহরণেও প্রথম রাউন্ডের সার্ভে ব্যর্থ হয়েছিল কারণ প্রশ্নগুলো ছিল প্রোডাক্ট নিয়ে (\"মিষ্টি কেমন লাগে\"), কাস্টমারের পরিস্থিতি নিয়ে না (\"কখন, কেন এটা কেনেন\")।",[53,1452,1454],{"id":1453},"আসল-job-খুঁজে-বের-করার-একটা-সহজ-উপায়","আসল job খুঁজে বের করার একটা সহজ উপায়",[41,1456,1457,1458,1461],{},"সরাসরি \"আপনার কী দরকার\" জিজ্ঞেস করলে মানুষ প্রায়ই ফিচারের ভাষায় উত্তর দেয় (\"আরেকটু দ্রুত হলে ভালো হতো\"), আসল কারণ বলে না। এর বদলে জিজ্ঞেস করুন: ",[64,1459,1460],{},"\"সবশেষ কবে এই সমস্যায় পড়েছিলেন? তখন ঠিক কী হচ্ছিল, আর তখন কী করেছিলেন?\""," — একটা নির্দিষ্ট ঘটনার গল্প জিজ্ঞেস করলে আসল পরিস্থিতিটা বেরিয়ে আসে, সাধারণ মতামতের চেয়ে।",[358,1463,1464],{},[41,1465,1466],{},"একটা উত্তর পাওয়ার পর থেমে যাবেন না — একবার \"কেন\" জিজ্ঞেস করলে সাধারণত উপরিভাগের কারণ পাওয়া যায়। পরপর তিন-চারবার \"তারপর কেন এটা গুরুত্বপূর্ণ\" জিজ্ঞেস করলে আসল emotional বা social job-এ পৌঁছানো যায় — এটাকে বলে \"৫ কেন\" (5 Whys) টেকনিক।",[388,1468],{":answer":1469,":options":1470,"checkLabel":392,"correctLabel":393,"explanation":1471,"incorrectLabel":395,"question":1472,"resetLabel":397},"1","[\"\\\"জিমে আর কী কী ইকুইপমেন্ট থাকলে ভালো হতো?\\\"\",\"\\\"যেদিন মেম্বারশিপ নিয়েছিলেন, সেদিন ঠিক কী হয়েছিল যে সিদ্ধান্তটা নিলেন?\\\"\",\"\\\"আপনি কি জিমের দামে সন্তুষ্ট?\\\"\",\"\\\"আর কোন জিমে ট্রাই করেছিলেন?\\\"\"]","নির্দিষ্ট একটা মুহূর্তের কথা জিজ্ঞেস করলে (মেম্বারশিপ নেওয়ার দিন কী হয়েছিল) আসল \"job\"-টা বেরিয়ে আসে — হয়তো এটা নতুন বছরের রেজোলিউশন ছিল, বা ডাক্তারের সতর্কবার্তা, বা বন্ধুর সাথে সময় কাটানোর ইচ্ছা। ইকুইপমেন্ট বা দাম নিয়ে প্রশ্ন ফিচার-লেভেলে আটকে থাকে, আসল প্রেরণা পর্যন্ত পৌঁছায় না।","একজন কাস্টমার প্রিমিয়াম জিম মেম্বারশিপ কিনেছেন, কিন্তু মাসে মাত্র ২ বার যান। ঠিক জিম কেন কিনেছিলেন সেটা বুঝতে চাইলে সবচেয়ে ভালো প্রশ্ন কোনটা?",[53,1474,1476],{"id":1475},"customer-discovery-তে-যা-করবেন","Customer discovery-তে যা করবেন",[452,1478],{":items":1479,"doneLabel":455,"resetLabel":456,"title":1480},"[{\"label\":\"প্রোডাক্ট নিয়ে না জিজ্ঞেস করে, নির্দিষ্ট একটা ঘটনার গল্প জিজ্ঞেস করুন\",\"detail\":\"\\\"সবশেষ কবে এই সমস্যায় পড়েছিলেন\\\" — সাধারণ মতামতের চেয়ে অনেক বেশি সত্য বেরিয়ে আসে।\"},{\"label\":\"একটা \\\"কেন\\\"-তে থেমে যাবেন না, পরপর কয়েকবার জিজ্ঞেস করুন\",\"detail\":\"প্রথম উত্তর প্রায়ই উপরিভাগের — আসল emotional\u002Fsocial কারণ তিন-চার স্তর গভীরে থাকে।\"},{\"label\":\"যারা প্রোডাক্ট কিনে ব্যবহার করছেন না (churn), তাদেরও জিজ্ঞেস করুন\",\"detail\":\"যারা \\\"job\\\"-টা অন্য কোথাও সমাধান করে ফেলেছেন, তারাই আসল প্রতিযোগী কে সেটা বলে দেয় — যেটা সবসময় সরাসরি প্রতিদ্বন্দ্বী কোম্পানি হয় না।\"},{\"label\":\"ফিচার-অনুরোধকে সরাসরি বাস্তবায়ন না করে, পেছনের কারণটা খুঁজুন\",\"detail\":\"\\\"আরও দ্রুত চাই\\\" বলার পেছনে হয়তো \\\"সময়মতো বসের কাছে রিপোর্ট পাঠাতে না পারার ভয়\\\" লুকিয়ে আছে।\"},{\"label\":\"একই প্রোডাক্টের বিভিন্ন কাস্টমারের ভিন্ন job থাকতে পারে, এটা মেনে নিন\",\"detail\":\"একটাই মেসেজ সবার জন্য কাজ নাও করতে পারে — সেগমেন্ট অনুযায়ী পিচ বদলাতে হতে পারে।\"}]","আসল \"job\" খুঁজে বের করার চেকলিস্ট",[41,1482,1483],{},"কাস্টমার কী কিনছে সেটা প্রশ্ন না — কাস্টমার কেন কিনছে, ঠিক কোন মুহূর্তে, কোন চাপ থেকে — সেই প্রশ্নের উত্তরেই আসল সেলস স্ট্র্যাটেজি লুকিয়ে থাকে।",{"title":95,"searchDepth":128,"depth":128,"links":1485},[1486,1487,1488,1489],{"id":1403,"depth":115,"text":1404},{"id":1419,"depth":115,"text":1420},{"id":1453,"depth":115,"text":1454},{"id":1475,"depth":115,"text":1476},"2026-09-10","একজন কাস্টমার মিল্কশেক কেনে না — সকালের বোরিং গাড়ি-চালানোর সময়টাকে সহনীয় করার একটা উপায় কেনে। প্রোডাক্টের ফিচার লিস্ট না, এই \"job\"-টা বুঝলেই সেল বাড়ে।",{},"\u002Fblog\u002Fbn\u002Fjobs-to-be-done-customer-problem",{"title":1388,"description":1491},"প্রোডাক্ট বেচবেন না, সমস্যার সমাধান বেচুন","blog\u002Fbn\u002Fjobs-to-be-done-customer-problem",[1498,1499,1500],"Customer Research","সেলস","বিজনেস","TOPAjOCpt_BhKxqqeV_N_Hx9tTiiamlLw20vaHTTO0E",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1503},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1505},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M8 2v3m8-3v3\"\u002F>\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M3 9h18\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1507},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"M12 6v6l4 2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1509},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\u002F>\u003Cpath d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1511},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21.54 15H17a2 2 0 0 0-2 2v4.54M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1513},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M16 7h6v6\"\u002F>\u003Cpath d=\"m22 7l-8.5 8.5l-5-5L2 17\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1515},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"M12 16v-4m0-4h.01\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1517},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m9 15l6-6\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1519},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M12 3v18\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1521},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1523},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7v14\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1525},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\u002F>\u003Cpath d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1527},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m9 12l2 2l4-4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1529},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1531},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01\"\u002F>",1791742745490]