Frontend on cloudmato.com

React प्रत्यक्षात कसं काम करतं: Fiber आणि Batch Rendering समजून घेऊ

cloudmato.com — Sat, 13 Jun 2026 17:37:28 +0530

तुम्ही कधी React app मध्ये एखादं button क्लिक केलं आहे आणि फक्त… विश्वास ठेवला आहे की UI बरोबर update होईल? हो, मीही, वर्षानुवर्षे. setState आणि स्क्रीनवर pixels बदलणे यांच्यामध्ये नक्की काय घडतं याचा मी कधी विचारच केला नाही — जोपर्यंत मी असा एक component debug करायला लागलो जो एका क्लिकवर पाच वेळा re-render होत होता. त्या rabbit hole मुळे मी सरळ Fiber, lanes, आणि React तुमचं app कधी re-render करायचं हे कसं ठरवतं याच्या आश्चर्यकारकरित्या मोठ्या history मध्ये पोहोचलो.

Vite समजून घ्या: ते Webpack ला का मागे टाकते आणि पुढे काय?

cloudmato.com — Fri, 05 Jun 2026 14:59:00 +0530

मला पहिल्यांदा CRA (जे आतून Webpack वापरते) वरून Vite वर प्रोजेक्ट स्विच केल्याचे आठवते. dev server एका सेकंदापेक्षा कमी वेळात सुरू झाला. मी खरोखरच काही क्षण टर्मिनलकडे टक लावून पाहत राहिलो, आणखी काही होण्याची वाट पाहत. काहीच झाले नाही. बस्स तेवढेच होते — ते तयार होते. Webpack वरील ही काही छोटी सुधारणा नाही. हा पूर्णपणे वेगळा अनुभव आहे.

Vite म्हणजे काय?

Vite (फ्रेंचमध्ये “fast” म्हणजे जलद, उच्चार “वीट”) हे Evan You यांनी तयार केलेले frontend build tool आहे — तेच ज्यांनी Vue.js बनवले [1]. ते 2020 मध्ये लॉन्च झाले आणि वेगाने वाढत आहे. 2025 पर्यंत, Vite दर आठवड्याला 5 कोटी 30 लाख npm downloads नोंदवतो, Webpack च्या 3 कोटी 60 लाखांच्या तुलनेत [5]. त्याच्या GitHub stars देखील तीच कहाणी सांगतात: 78,000 विरुद्ध Webpack चे 66,000 [5].

Frontend 2026: नवीन Frameworks, Tools आणि Design Patterns

cloudmato.com — Fri, 05 Jun 2026 10:48:59 +0530

फ्रंटएंड परिसंस्था दरवर्षी बदलते, पण 2025-2026 हे संरचनात्मकदृष्ट्या वेगळे वाटले. हे फक्त नवीन libraries नव्हते — मूलभूत mental models बदलले. आपण कसे hydrate करतो, bundle करतो, components कसे structure करतो, आणि reactivity कसे हाताळतो — हे सारे अशा प्रकारे बदलले ज्यामुळे apps च्या कार्यक्षमतेवर आणि build होण्यास लागणाऱ्या वेळावर खरोखरच परिणाम होतो. येथे काय लक्षात ठेवण्यासारखे आहे ते पाहू.

Framework Landscape विखुरत आहे (चांगल्या प्रकारे)

React अजूनही सुमारे 45% adoption सह वर्चस्व गाजवत आहे [1], परंतु प्रत्येक project प्रकारासाठी हे default उत्तर आहे असे म्हणणे अधिकाधिक कठीण होत आहे. आता तीन स्पर्धक गंभीर आहेत.

CSS मध्ये Div Center करण्याचे सर्व मार्ग, क्रमवारीनुसार (2026)

cloudmato.com — Wed, 03 Jun 2026 17:28:24 +0530

CSS centering शी पहिली झुंज कोणीही विसरत नाही. तुम्ही Google करता, Stack Overflow वरून snippet paste करता, आणि पुढे जाता — हे योग्य मार्ग होते की फक्त एक मार्ग होता हे कधी विचारत नाही. 2026 मध्ये, div center करण्याचे किमान सात वेगळे मार्ग आहेत, आणि त्यातील काही वर्षांपूर्वीच बंद व्हायला हवे होते.

हे सर्व मार्ग, सर्वात वाईटापासून सर्वोत्तमापर्यंत क्रमवारीनुसार.

संपूर्ण तुलना

पद्धत	क्षैतिज	उभी	निर्णय
`display: table-cell`	होय	होय	कधीही नाही
Negative margins	होय	होय	कधीही नाही
`abs` + `translate(-50%, -50%)`	होय	होय	टाळा
`inset: 0` + `margin: auto`	होय	होय	कधी कधी
`margin: auto`	होय	नाही	केवळ क्षैतिज
Flexbox	होय	होय	चांगला डिफॉल्ट
CSS Grid	होय	होय	सर्वोत्तम डिफॉल्ट
CSS Anchor Positioning	सापेक्ष	सापेक्ष	विशिष्ट वापर

1. `display: table-cell` — कृपया थांबा

Flexbox येण्यापूर्वी लोक हे करायचे. तुम्ही तुमचा element एका बनावट table मध्ये गुंडाळता, browser ला तो <td> सारखा वागवायला भाग पाडता, आणि vertical-align: middle चा गैरवापर करता.